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た だ か ず に 、 お 問い 合わ せい た だ いて も 、 技 術 評論 社 お よび 著者 は 対処 し か ね ます 。 あ ら か じ め 、 
ご 承知 お きく だ さい 。 


本 文中 に 記載 され て いる 製品 名 、 会 社名 は 、 すべ て 関係 各社 の 商標 また は 登録 商標 で す 。 な お 、 本 文中 に マー 
ク 、⑧ マーク は 明記 し て お り ま せん 。 


は じ め に 


「 自 分 を 表現 する 場所 が ほし いな ー」「HTML5 や CSS3 を Web 制作 の 仕事 で 利用 し た い ] 

本 書 を 手 に 取っ て くれ た 方 は 、 様 々 な 思い で Web サ イト を 作ろ うと され て いる こと と 
思い ます 。 

Web サ イト を 作る た め に は 、 ま ず 文 字 情 報 が 必要 で す 。 それ を 受け 持つ の が HTML で 
す 。 単純 な 文字 情報 に [見出し] 「 本 文 ] な どの 意味 付け を し ます 。 
また 、 デ ザイ ン の よい Web サ イト を 作る た め に は CSS が 欠か せま せん 。 文字 の 大 き さ 
と か 行間 と か 、 表 示 位 置 の 調整 を し ます 。 
画像 が あめ る と 情報 が 理解 し や すく な り ま すね 。 動き を つけ て 、 よ い 体験 を 訪問 者 に 提供 
する に は javaScript が 欠か せま せん 。 

HTML は 、1993 年 に 初め て 世の中 に 出 ま し た 。 最 新 の バー ジョ ン 「HTML5」 は 単純 
な バー ジョ ン ア ッ プ で は な く 、Web ア プリ ケー ショ ン を 作る こと を 志向 し て いま す 。 外 
部 の プロ グラ ム が な く て も 動画 、 音 声 が 埋め 込め た り 、 ネ ッ ト が つなが っ て な く て も 閲覧 
可能 な Web サ イト を 作る こと が で きま す 。 

CSS は 、1996 年 に 初め て 世の中 に 出 まし た 。 最新 の 「CSS3」 は 仕様 を な ひとつ に まとめ ず 、“ 
複数 に 分 け て 策定 が 進め られ て いま す 。 前 の バー ジョ ン で は で き な か っ た ブロ ッ ク の カラ 
ム 分 け 、 変 形 や アニ メー ショ ン な ど 、 で きる こと が と て も 増え て いま す 。 

また 、 javaScript を 利用 し た 関連 技術 も 多く 作ら れ て いま す 。 ブラ ウザ か ら Web カ メ 
ラ や マイ ク を 利用 し た り 、 ブ ラウ ザ か ら フ ァイル を 作っ た り 、 ブ ラウ ザ に デー タ を た くさ 
ん 保存 する 等 、 ブ ラウ ザ で で き な か っ た こと が で きる よう に な り ま す 。 町 中 の 紙 の 広告 や 
家電 の 液晶 な ど が 、 ブ ラウ ザ を 表示 で きる ディ スプ レイ に 置き 換 わ れ ば 、Wveb 制 作 を す 
る 方 々 の ビジ ネス の 幅 は きっ と 広がり ます 。 

で きる こと は 多く な り ま し た が 、HTAML、CSS、 javaScript を あめ わせ る と か な り の 量 
の 仕様 に な り 、 習 得する に は 時 間 も 根気 も 必要 で す 。 

本 書 は HTML と CSS を 扱い ます (javaScript は 扱い ませ ん m(_)m)。 これ まで の 仕 
様 か ら 新しい 仕様 まで 効率 よく 学習 で きる よう に 、 よ く 使 われ る も の 、 ブ ラウ ザ の サポ ボー 
ト が 進ん で いる も の を 抜粋 し てこ コ ン パ クト に まとめ まし た 。 また 、 従 来 の ポケ ッ ト リ ファ 
レン ス と 同様 に 目的 か ら 引 ける よう に し て あり ます 。 

イラ スト と サン プル に は ちょ こっ と し た ダジャレ や 、 く すっ と 笑え る も の を た っ ぷり 用 
意 し て いま す 。 それ だ け 見 て も 楽し め ま す の で 、 ち ょ っ と 疲れ た な ーー と いう と き は パラ パ 
ラ と めく っ て ゆる 一 く 笑っ て くだ さい 


本 書 を きっ か け に 、 皆 様 が お 持ち の 情報 を 世の中 に 出す お 手伝い が で きた な ら 、 著 者 と 
し て は 存外 の 喜び で す 。 


著者 代表 森 史 憲 


Contents_ 


chapter 1 HTML の 基本 [ 015 


4 ジル イル 人 置 、 こ 1 
| 。Web サ イト 内 の ファ イル 位置 


、」」HTML と は oe 


j s HTML の 概要 ンー 016 
: 要素 と 文書 の 構造 。 .018 
※ ぁ タグ 名 ・ 必 性 0 -019 
PIASRUDSSN UI .020 
二ノ キン 4022 
0 0 の ウイ リル レ 39 .024 
。 ファ イル の 整理 025 


: 属性 値 の バリ エー ショ ン …… -028 
間 ウ ラウ ザ 上 で テキ スト ド を 編 .031 

「 2 ラ NW2IEERS 放 を 1803 PROBE .032 
! 『 自動 で く ペ ル チ エ ッ ク す る 033 
2 し IMS9 PMS gp】 et っ に 2 034 


004 


cispter 2 HTML リ ファ レン ス 0ss 
ー 全体 人造 me 


NE 双書 の 構造 こ D66 YE 直言 。 036 
ij W 基本 の HTML ファ イル を 作る シシ ツ (の の ウ の デー デ ーー の の 「ー 037 
還 Column ) オフ ライ ン 時 | こも ララ ウリ 表示 9 る 038 
9 nn ル き 

 * X ま コー トド - 

: き 検索 エン ジン H に 概要 な ど を ES の "レー" ンー 042 
1 ト フォン ノ の 表示 会 設定 9 る | .  。. 043 
人 邊 dh 生 記紀 や マー ク な 表示 9 る 。 。 。 。 。 …. 044 


フラ ウリ で は 
し 四 出 し を 人 0 UE トト |。。 ーー や で ーッ | 
* 汎用 的 に 使え る 要素 ①.…… 
* 汎用 的 に 使え る 要素 60. 。 


A まん まり 2 チー マ の 区 因り と し て 表す 、 
2 お あり の 仙 だ 部 の と し 6 ます 。。 > 
* まとまり を 主 な リン ク の 集まり と し て 表す .… 


まこ まり の 明 導 の 部 SS 053 | 
"まく き DOOE 和 0 


es セク ショ ン の 連絡 先 を 入れ る . 
s ペー ジ の 主 な 内 容 を 示す .… 


HTML5 と 関連 技術 の 進化 4 COCOPYN203R28 057 | 


(ぴぴ ) テキ スト の 表示 me 


@ 軸 潜 を 表 0 R22e20 だ 
WE 衝 の の み 2 区 切り 大 天 人 の 2 Pan 
@( 和 2 NMOS 
* 長い 英字 や 数 字 の 改行 位置 を 表す . 
* 重要 性 や 強調 を 表す .… 

。 上 付き 文字 ・ 下 付き 文字 に する 。。 
e 追加 ・ 削除 箇所 を 表す .… 0 
。 デキ スト に 適切 な 意味 付け を する ①。 


ィ イ スト に 坦 因 が 出合 人 の の 

長い 文章 の 5 
e 短い テキ スト の 引用 
e 改行 や スペ ー ス を その まま 表示 する 
(00 り 0 な し を まま 9 0 - ニ で NN 0 0 1 


・ 文 字 を 書き 進め る 方 向 た コン トロ ー ル する ーー-02 


(区 ) セク ショ ン 049 
ココ 、 リ クコ ニー 「 の っ ーーー ンー 049 | 


005 


006 


00 リミニ コ ヨロ リブ 和 ブ ビニ ヨ ヨ の = こ eo 
i 順序 な し リス ト を 表す .… 0 
7 まき "0 0 
: @ 順序 付き リス ト の 文頭 の 表示 を 変え る … 
: e 順序 付 さ リス ト の 最初 の 数 字 を 指定 する . 
: 文頭 の 番号 が 降順 の リス ト を 作る .………- | 
| e 名 前 と 値 の 関連 付 は の リス ト を 表す 


| 06」 テー ブル 082 


WE る 量 索 0 ピッ に rie 
i 表 組 の 境界 線 を 表示 する 
: * 表 組 の デー タ セ ル を 作る 
| 表 組 の ヘッ ダ セ ル を 作る 
: * 表 組 に タイ トル を つけ る 
| 電 samiih 但 表 組 を 読み 上 げ 環 境 で も 利用 可能 に する -…………… 087 
しい し 3iEI99) Tall の PMP り PKG っ 隔 SEISRN 020 ス 0 

: * 表 組 の 横 方 向 の セル を 結合 する .……- 
ie 表 組 の 横 列 を 3 グル ー プ に まとめ る . 
4A 表 組 の 人 0 罰 を まこ の る ーーー ツー 


| (上 リン ク 092 


es リン ク を 表す .… SO 
。 リン ク 先 の 表示 ウイ ンド ウ を 指定 する Mk 093 


リン クル 人 才 U イ レト つて (導く NNW 094 
| "ペー ジ 内 0 本 選 の 協 所 に リン の する 095 
) * 呈 ペ ー ジ の 特定 の 場 馬 に ワン ク す る 、 し) 096 
mL アト レス 用 の 0 ラク 人 二 9。 。  。 097 
症 語 下 号 用 の リッ ク を だ を 表 き まき 、 (ーー 

# * ファ イル ダウ ン ロ ー ド 用 の リン ク を 表す 

ie 特定 の キー に リン ク を 割り 当 
| e ス ク 先 の 説明 を 示す 

4 外部 つ 4 (し と の 関 作 ま 8 、  。 。。 の 


* ッ タイ トル ルー の アイ ニン を 設定 する 、 
* 閲覧 環境 ご と に 読み 込む CSS5 ファ イル を 設定 ーー 
* リ ンク の 上 準 太る URL を 指定 する 。-、、 


() :) イメ ー ジ + そ の 他 オブ ジェ クト 106 | 
画像 を 挿入 する ーーーーー0- ei 


軸 像 が 表示 され な いと き の テ キス ト を 指定 


イメ ー ジ 内 に 自 申 に リン ク を 設定 する . 
説明 文 つ ま の コン テン ツ を 表す …. 
* 音楽 を 埋め 込む .… 


の 。 @ の @⑨ の の 


* 複数 形式 の 音楽 や ムー ビー を 用 意 す る . 
* バ の ビー 内 避 手 暗 を 表示 9 る …… 


に コー ジコ (に と 8 | 


() フレ ー ム 120 | 


9 用 ペペ こ シバ ハッ ジ AO0 計 部 因 箇 凡 の する 5 OO 
s 要素 を ペー ジ 内 の 一 部 に 挿入 する ーーーーーー…ー……ーーー 
2 402 の し パ の りな 提 E99 

WW イン クウ レー ー ム 内 の リン ク 表 示 先 指定 


(| フォーム oe 


e フイ ー ム の) 億 負い 月間 目 の 得 類 。。。 24 
9 オー ム 人 の 時 未 的 が 設定 を する EE emo Io 26 
s フォ ー ム か が か ら デ ー タ を 送る と き の 形 式 を 指定 する . | 


* 入力 チェ ッ ク を する が どう が 指定 する 
wl(1 の ラキ スト 入力 ! 0 


* 単 一 選択 の 項目 (ラジ オ ボ タ ン ) を 作る . ぼ . 2 
=。 入力 内 容 が 隠さ れる 入力 欄 を 作る 
* フリ イル と 涯 肌 昌 る 相 目 定 作 る に の ーー し 0 0 1 


ブラ ウザ 上 の 画像 サイ ズ を 指定 1 
イメ ー ジ ・ ム ー ビ な ど を 挿入 する . らら な の か 09 


s ハー ビー を 配置 JO 52050 2 5 


。 損 数 選択 の 項目 (チェ ッ ク ボ ックス ) を 作る 130 | 


00Z 


i w 入 力 内 容 に 応じ た 入力 欄 を 作る ①-ーーーーーーーーーー- 2 
: * 入力 内 容 に 応じ た 入力 欄 を 作る ②⑧.-…… ・ 

i * 複数 行 の テキ スト 入力 項目 を 作る .… ー 
* | [| リノ タク クリ スト | トム 作る 0 0 bb (0 -13/ 
is ドロ ッ プ ダウ ン リ スト 内 を 一 覧 で 表示 する 198 
we ドロ ッ プ ダウ ン リ スト 内 を グル ー プ 化す る .。 9 
| ー 140 
: 非 表示 の 項目 を 作る .… 0 ソ 

| 。 入 力 内 容 を り リセット する ボタ ン を 作る 

i s 入力 内 容 を 送信 する ボタ ン を 作る 
i き 画像 を 用 いた 送信 ポタ ン を 作る .….… 
1 
ji W フォ ー ム 部 品 の 項目 名 を 表す .… 
s 複数 の フォ ー ム 部 品 を まとめ る . の 82222 SH 
2 2 加 当 JHPERS1S23 計 3 いで 
: 送信 時 に 入力 され て いる か が チェック を 行う .… 
| ・ フ ォ ー ム デー タ の 全 先 が 穫 な る ポタ ン な 作る 
: * 入力 フォ ー ム を 自由 に 配置 する .… 

| w 入力 例 を 表示 する -……。 
| 。 数 値 の 入力 を 制限 する 。………… 1 
: w テキ スト の 入力 を 制限 する 2 (54 
i $ ペー ジ を 開い て すぐ に 入力 で きる よう に する .… ( 
りあ ケ キ スト ボッ タス で 大 人力 避 夫 表 示す る 56 
i w ある 範囲 内 で の 測定 値 を 表示 する 計量 移ら ソー 57 
: き 進捗 状況 を 表示 する 08 計 338 つ で の 58 


capter 3 スタ イル シー ト の 基本 1s9 


| 介 スタ イル シー ト と は 1eo 


HO 才 放 0 
| * スタ イル シー ト の 基本 的 な 書き 方 ーー 


1 


008 


備 ) スタ イル シー ト の 設定 パタ ー ン 
中 ノル ァイル の スタ イル を 読み 込 6、 ニ エ EpS>Y ュ XXtI1I0ItI0t0 ゃ tmsI0I1I1I1th{ 
4 ヘソ クト スタ イル あの る 、 OO 


6 生 表 に スタ イル 念 直接 記述 まる OO 
e 要素 (に 定義 済み の スタ イル を 適用 する ーーーーー…ー…ー… 


《) 適用 メデ ティ ア の 設定 パタ ー ン (メデ ィ アク エリ ー) 
e 財 家 と する ユー ザー 環境 を CS5 ファ イル 内 に 指定 する 


人 L) スタ イル シー ト の 適用 対象 (セレ クタ ) 


し 肌 に 581 ニ PUE82M く OIDS こり 
旨 定 の | じ D や クラ ス を 持つ 要素 を 指定 する -… 
特定 の 組み 合わ せ の 要素 を 指定 する ………- 
き 定 の 属性 や 属性 値 を 持つ 要素 を 指定 する … 
ュー ザー 操作 で ぐ で 変化 する 要素 を 指 守 する ①..……-…-…- 
0 リー の 2G) 叶 2 オ さけ 目 AE3O 0(87880G2/20240.0 
特定 の 場所 や 順番 で 要素 を 指定 する ① 2 
* 特定 の 場所 や 順番 で 要 素 を 指定 する ②⑧ 
* 要素 内 の 1 行 目 や 1 文字 目 を 指定 する -…- 

(月 2 | 朋 EO 02020EP228028CCR00 
* その 他 の セレ クタ を 指定 する 


《B フォ ント 


w EEOU 表 ホソ オン ノド トド を 目 二 9 る 9 8 ETmoYvyvyYftftftflclczczcz フ ヲ 
es 守り 大 まき さる 信 の 9 シシ 
eX の 大 いひ 生 人 用 二 する 08 
< 文字 の 傾き を 指定 する 

e 英 又 字 の スモ ー ル キャ ッ プ ス を 指定 する 
9 邊 こん 上 有 E920 1 0 5 oo 


167 


167 
168 | 
169 
120 
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009 


010 


| 。 ス ペー スタブ ・ 改 行 の 扱い を 
| < 単語 内 の 改行 を 指定 する .… リリ シー や 
| 。 単 語 内 の 改行 を ハイ フン で つなぐ 指定 を する いい 
i 段落 内 の テキ スト の 表示 位置 (揃え ) を 指定 する . 
| e 単語 問 の 幅 を 指定 する ーー 
1 9 時 回 の ⑳ 則 生 搬入 9808 
4 加 の | 条 自 の 宇 下 げ 和 を 指 下す る 
| 。 文字 の 上 下 ・ 中 央 の 線 を 指定 する 
| 傍点 の 形 を 指定 する 
i e 傍点 の 色 を 指定 する .… 
| < 傍点 の 形 と 色 を 一 括 指定 する .… 
」 科 9 志 2 は 人 S2NO2SD6SSSRB5SAGBSSKGGHRSSS 当 US 


| ヘッ (リリ た 捕 洗 ま する FT エ TO09090 0 


] 形 タラ ラー ショ ン を 人 拓 り 返し 表示 する 


190 
e 文字 の 色 を 指定 する .。 キュ .191 
WVWVeD 上 の フォ ン ト を 指定 する .192 
| 和 U う テキ スト 193 
| e 英文 字 の 大 文字 ノ 小 文字 を 指定 する .… -193 


「 1 に 02】BPP2Z51 ミ IIE3SDP9082SRSRSNSSPSSES が 8 880 206 
e 育 景 男 像 を 指定 する . ぼ … 207 
e 背景 画像 の くり 返し 方 を 指定 する 。208 
* スク ロー ル 時 の 背景 画像 の 固定 表示 する .… .209 
* 育 景 画 像 の 縦 ・ 横 位置 を 指定 する .… 1 0 
* 育 景 画 像 が 表示 され る エリ ア を 指定 する 。。 。 11 
e 育 景 国 像 が 表示 され る 基準 位置 を 指定 する 2 
* 背景 画像 の 表示 サイ ズ を 指定 する .…--- 13 
* 育 景 画 像 の スタ イル を 一 括 指定 する .……… 4 

ef 抽 草 先行 突 装 され で いる プ 自 パ ティ を 利用 5 
s* 直線 的 な グラ デー ショ ン を 表示 する .… 。 。216 
9 門 展 の つう シー ショ ン ツン を 表 ホラ きる 々 2 - 00 218 
e 直線 的 な ダラ デー ショ ン を 繰り返し 表示 する 220 
弄 


) ボー ダー 222 | 


W 人 志 のり 大 よ を 揚 定 する il1lt1t+c< 
= 要 線 の 種類 を 指定 する .- 

。 枠 線 の 色 を 指定 する .… 
e 枠 線 ス タイ ル を 一 括 指 
。 枯 線 の 角 丸 を 指定 する 
、 画像 ボー ダー の イメ 
。 男 像 ボー ダー の 表示 位置 を 

、 画像 ボー ダー の 太 さ を 指定 する 
。 画像 ボー ダー の 拡張 を 指定 する .… 
冊 

悪 


画像 ボー ダー の 繰り 返 し を 指定 する 
画像 ポ ボーダ 


Da 和 


* リス トド マー カー の 種類 を 指定 する 
* リス トマ ー カ ー の 画像 を 指定 する 

* リス トマ ー カ ー の 位置 を 指定 する 
し 人 PeZ424200 有 2eiesP1 ニ SAS の OHCSordtH2RRHRSHRRTYNNIRW 有 1 


め り テー ブル 238 | 


s 表 組 の 縦列 の 幅 を 固定 する .… 0 交 ら 20 
ゅ 表 組 の 枠 線 を セル ご と に 分 離す る .。 ドリ 
s と な り 合 う セ ル と の 枠 線 の 間隔 を 指定 
* 値 が 人 つっ RNN 
e 表 組 の タイ トル の 表示 位置 を 指定 する 


ツタ スズ の 則 ら 店 さ を 指 定 す る いこ 
ドッ クス の 内 側 の 余白 を 指定 する ーーー…ーー…- 

ドッ クス の 外側 の 余 臼 を 指定 する 

ドッ クス の 配置 方 法 を 指定 する 


』 /| 
@ 
* 
す 


| 表示 と 配置 243 | 


011 


012 


al 
四 


\ ッ クス の 配置 位置 を 指 
\ ッ クス の 重ね 順 を 指定 
\ ッ クス の 回 り 込 み を 指定 
*\ ッ クス の 回 り 込 み 解除 
\ ッ クス か ら は み 出 た 内 容 の 表示 方 法 を 指定 する .…- 25 
ボッ クス の 切り 抜き を 指定 する .… _。 。 。 。。 。 2 
ポッ クス の 種類 を 指定 する 
文字 が 並 方 向 を 指定 する … 


2 


NN 
 - 


計 用 


| と 


| 。 ボ ックス の 表示 : 電 表 示 を 指定 する .. 0 
| 行内 の テキ スト や 要素 の の 背 え を 指定 する 。…。 、 の 


| の) イン ター フェ イス 259 


: 『 輪郭 線 (アウ トラ イン ) の 太 さ を 指定 する 
i 輪 郭 線 (アウ トラ イン ) の 種類 を 指定 する . ぼ … 

: 9 輪郭 線 (アウ トラ イン ) の 色 を 指定 する .……………-…- 

: e 輪郭 線 (アウ トラ イン ) の 内 側 の 余 白 を 指定 する .…………- 261 
: @ 輪郭 線 (アウ トラ イン ) スタ イル を 一 括 指定 する .………………- 262 
| s 追加 する 0 … 

| ソル の 種類 を 指定 0 
is 枠 の 幅 ンプ 高 さ 2 ウー ヤシ ヴイ 0 ロロ 0 の の の 
i W 要素 の 大 き さ を 変更 で きる よう に する .…………………………- 266 


* 領域 を 超え た テキ スト の 処理 を 指定 まる 267 


| 23】 カラ ム 268 


の 0) 導 だ 用 Si 268 
の の 間 を 放 必 90ONWNO ToT 269 
e カラ ム の スタ イル を 一 括 指 定 する 。. 2 ウロ 270 
9 ラッパ (0 四 全 用 走 9 る 0 8 ST OO OO 0 271 
) * 罰 ラム KU 振り 色 を 指定 きる. 。 、。 272 
| * ラム の 区 切ら 誠 の 種類 を 指定 9 る 273 
| * カラ ム の 区 切り 線 の 幅 を 指定 する 2 
i ew カラ ム の 区 切り 線 の スタ イル を 一 括 指 定 す る 275 


の ! り トラ ンス フォ ー ム 276 
OPD 2 ーー 


。 トラ ンス フォ ー ム の 原点 を 指 : 
9 | ノバ ノル 4 と と 
* 奥行 ぎ を 持た せる か どう か が 指 

* 奥行 き の 消失 点 を 指定 する .….- 


0 ヨ の 02 時 KERRNYSSS2113GH 
シン ンション 和 更 具合 を 指定 する 
9 選 
及 2 ヨ 


っ Jl 2 ング を 指定 する .… 0 
ン の スタ イル を 打 指 直る し 0 289 


(の 3 アニ メー ショ ン 290 
いら 1 


ギー の リー ム 人 が 揚 29M n20000200 0 
22060m シ ヨン 0 短 前 開 指 四 あ る NIS 
ーション の 時 間 を 指定 する 
ン の 変更 具合 を 指定 する .………- 9 
ン の 開 娘 久 イミ ンク を 指 走 す ずる. の ん 294 
ン の 繰り 返し 回 数 を 指定 する --………295 
ン の 再生 方 向 を 指定 する 
ン の 再生 状態 を 指定 する 6 
ショ ン 再 生前 後 の 表 示 を 指定 する ee 2 
ーション の スタ イル を 一 括 指 定 する ーー299 | 
snmm* Web サ イト の 統一 感 を 保つ 基本 の スタ イル し 300 
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Appendix 


* RGB カ ラー 16 進数 値 対 応 表 に 
wHLU ラ テレ hoo 308 


INDEX _ ーー 
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グ HTML と は 

HTML は Hyper Text Markup Language の 略語 で す 。 

[Hyper Text] は 単なる テキ スト で は な く 、 他 の ファ イル と つなが る こと が で きる デ ヨ 
スト で ある こと を 指し て いま す 。 

[Markup] は 、 テ キス ト に 見 出し 、 本 文 、 リ スト 、 表 な どの 意味 を つけ る こと が で き 
る こと を 指し て いま す 。 

[Language」 は 、 日 本 語 や 英語 と 同じ よう に 言語 で め る こと を 指し て いま す 。 

つま り 、HTML は 「 他 の ファ イル と つなが っ た り 、 テ キス ト に 意味 付け を し た り で き 
る 言語 ] な の で す 。 


II 


中 HTML が 生ま れ た 背景 
0 HTML は 、 最 初 、 ス イス に ある 素 粒子 物理 学 の 研究 所 (欧州 原子 核 研究 機構 ) の 研究 
者 た ちの た め に 作ら れ ま し た 。 

この 研究 所 で は 、 多 く の 研 究 者 た ち が 独 立 に 研究 結果 を 残し て いた た め 、 そ れ ぞ れ の 参 
照 し た 研究 結果 を 探す の が 手間 に な る と いう 問題 が め り ま し た 。 

この 問題 を 解決 する た め に 、 情 報 共有 の 場 と し て の World Wide Web と 、 研 究 者 た 
ち が 自 身 の 研究 結果 と 参照 し た 研究 結果 を つなげ る た め の 言語 、 つ まり 初期 の HTML や 
関連 する 仕様 が 生ま れ ま し た 。 


中 ブラ ウザ の 独自 実装 と 標準 化 

HTML が 世界 に 広まる と 同時 に 、VVeb を 閲覧 する た め の ソ フト ウェ ア (ブラ ウザ ) が 
いく つも 生ま れ ま し た 。 し か し 各 ブ ラウ ザ は 、 独自 の タグ を 組み 込ん で いる と いう 問題 が 
あり まし た 。 そこ で HTML の 標準 化し は じ め 、WVeb に 関わ る 様々 な 技術 の 標準 化 の た め 


下 [rr ビ ミ ー エ 


のど ーー Wec め Reg 四 ン 」 
ん > 


STANDARDS PARTRCPATE NMEMEERSP BCUTWSC 


に 、World Wide Web Consortium (略称 : VV3C) と いう 非 営利 の 団体 が 生ま れ ま 
し た 。 W3C の 中 で HTML は 標準 化 さ れ 、 バ ー ジ ョ ン を 重ね て いく こと に な り ま す 。 


HTML の XML 化 

W3C は 、HTML を XML (Extensible Markup Language) と いう デー タ 記 述 言語 
と し て 、 進 化 さ せる こと を 考え て いま し た 。XML は 、 そ の 名 前 が 示す と お り マ ー ク アッ 
プ 言 語 を 拡張 (extense) し た も の で す 。 そこ で 生ま れ た の が XHTML で す 。 

XHTML は 、XML の 構文 を 利用 し た HTML の バリ エー ショ ン で す 。XHTML は 、「 要 素 
名 や 属性 名 は 小文字 「 必 ず 終 了 タ グ が 必要 ] な どの ルー ル を 加え る こと で 、 デ ー タ 記述 
言語 の 方 向 性 を 持た せま し た 。 し か し 、 厳 密 な ルー ル が 足かせ に な り 、HTML ほ ど 広 ま 
り ま せん で し た 。 


HTML5 へ の 流れ 

W3C は 、 さ ら に 新しい バー ジョ ン の XHTML の 策定 を 進め て いま し た が 、 現 状 を 必 ま 
える と 広 ま ら な い の は 明らか で 、 仕 様 の 名 前 も や HTML の 利用 の され か た に 合わ な いも の 
で し た 。 

W3C の 考え に 不満 を 感じ た 企業 は 、HTML は Web ア プリ ケー ショ ン を 作る 流れ に 
ある と し て 、WHATWG (Web Hypertext Application Technology Working 
Group) と いう 標準 化 団体 を 作り 、Web Applications 1.0 を 策定 し まし た 。 

Web Applications 1.0 に は 、HTML の 仕様 だ け で は な く 、VWeb ア プリ ケー ショ ン 
を 作る た め に ブラ ウザ が 実装 する 様々 な 機能 の 仕様 も 盛り 込ま れ て いま し た 。 その た め 、 
後に 、 機 能 ご と に 別々 の 仕様 に 切り 出さ れ 、 策 定 さ れ て いさ まし た 。 

W3C は 2008 年 に 、Web Applications 1.0 と 入力 フォ ー ム を 改良 し た 仕様 で ある 
Web Forms 2.0 を 統合 し て 、HTML5 と し て 草案 を 発表 し まし た 。 また 、 新 し い バ ー 
ジョ ン の XHTML の 仕様 は 廃止 され まし た 。 

HTML5 は 、2014 年 の 正式 勧告 を 目指 し て 、 ブ ラウ ザ 間 の 相互 運用 性 を 高め る 段階 に 
あり ます 。 また 、 次 の バー ジョ ン ア ッ プ 版 で め る HTML5.1 の 策定 も 進ん で いま す 。 

本 書 は 、 こ の HTML5 お よび 関連 技術 で あめ る CS53 を 扱い ます 。 


2014 年 標準 化 予定 


WHATWG 


HTML の 仕様 の 移り 変わ り 


中 要素 と タグ 


も し HTML が な か っ た ら 、Web サ イト は どれ が 


| 要素 と 文書 の 構 和 


出し で どれ が 本 文 な の か 、 ど れ が リ 


スト で ご どれ が 表 な の かよ くわ から な し 状態 に な る で し ょ う 。 
HTML で は 、 開始 タグ と 終了 タグ で テキ スト を 囲う こと で 、 テ キス ト に 意味 を つけ ます 。 


開始 タグ と 終了 タグ で 囲ま れる テキ スト を 内 容 (コン テン ツ ) と 言い 、 タ グ と 内 容 を ま と 


め て 要素 と 言い ます 。 

例え ば 、<h1>HTML5 の 構造 と タグ </ 
h1> の タグ は <h1> と </h1> で あり 、 開 始 
タグ は <h1>、 終 了 タ グ は </h1> で す 。 

内 容 は HTML5 の 構造 と タグ で あり 、 要 素 
は <h1>HTML5 の 構造 と タグ </h1> と な り 
ます 。 

また 、 有 要素 で 意味 付け を する こと を マー ク 
アッ プ (HTML の AM:Markup) と 言い ます 。 


要素 の 省略 


も 1 
開始 タグ 内 容 


要素 


<h1>HTML5 の 構造 と タグ </h1> 


終了 タグ 


要 、 開 始 タグ 、 終 了 タ グ 、 内 容 の 例 


要素 は 「 ご 要素 内容 く / 要 素 >] で 構成 され ます が 、 終 了 タ グ が 省略 で きる 要素 やあ 
り ま す 。 例 と し て 、「 段 落 ] を 示す ぐ く p> や 、「 リ スト 項目 ] を 示す ぐ ||> が あり ます 。 
また 、「 改 行 」 を 示す ぐ br> や 「 画 像 ] を 示す く img> は 、 内 容 を 伴わ な い 要 素 ( 空 要素 ) 


で す 。 その た め 、 終 了 タ グ も 存在 し ませ ん 。 


HTML 文書 の 構造 
HTMIL 文書 の 構造 は 、 大 ま か に 以下 の よう 
に な り ま す 。 


夫 HTML 文 書 を 示す 記述 

朝 文 書 に 関す る 情報 (タイ トル 、 要 約 、 キ ー ワ ー 
ド 、 読み 込む ファ イル な ど ) 

夫 文 書 の 本 体 
替 の 前 に は html 要 素 の 開始 タグ 、 坦 の 後に 


は html 要 素 の 終了 タグ が あり ます 。 
右 図 は 基本 的 な HTML 文書 の 構造 の 例 で す 。 


HTML の 構造 の 例 


|) 
<!DOCTYPE htmt> | 


く <htmt tang="]a"> 
く <head> | 


く <meta charset="utf-8『"> 
< て tjtte> は じ め て の HTML5</ て 1 て te> 


く </head> 


く <p>Hetto! く </p> 


</body> 


く /htmt> 


タグ 名 ・ 属 性 名 ・ 属 性 値 


』 開始 タグ の 内 容 


要素 は 、 タ グ 名 、 属 性 名 、 属 性 値 で 構成 され る 「 開  。.。 
始 タ グ | か ら 始 まり ます 。 タグ 名 属性 名 属性 値 | 


タグ 名 は 、 要 素 で 意味 付け を する 対象 を 示し て 
いま す 。 例え ば 、 対 象 が 「 画 像 ] で われ ば img、| 動 9 Pe RdeKehte | 


画 ] で あれ ば video、[/ ハ ルイ パー テキ スト アン カー」 は じ め て の テキ スト リン ク 
で あれ ば a の よう に な り ま す 。 </a> 


また 、 要 素 に は 「 属 性 ] を 持た せる こと が で き 上 。 委 失 の 開始 タグ に は タグ 名 [al、 
ます 。 例え ば 、a 要 素 に href と いう 属性 を 追加 す 必 性 名 「hrefl、 属 性 値 「index.html 
る と 「 移 動 先 の 場所 ] を 示し ます 。 この と き 記 述 が 宮 ま れ て いま す 。 
する 「hrefl が 属性 名 で す 。 右 の 例 の よう に 、 タ グ 名 、 
半角 スペ ー ス の 後に 書き ます 。 
href と いう 属性 名 を 記述 し た だ け で は 、「 移 動 先 の 場所 ] が どこ に な る の か 定まっ て い 
ませ ん 。 属 性 を 具体 的 な 値 で 指定 する の が 「 属 性 値 ] で す 。 例え ば 、href 属 性 に index. 
html を 指定 する と 、a 要 素 は 「index.html こ 移動 する ] と いう 特性 を 持つ こと に な り ま す 。 
な お 、 属 性 は 、 す べ て の 要素 ーー 
に 適用 で きる タイ プ と 、a 要 素 の 
href 属 性 の よう に 特定 の 要素 に タグ 名 属性 名 属性 値 。 属性 名 
し か 適用 で き な い タイ プ に わか 
れ ま す 。 ま た 、 記述 で きる 属性 <video src="video.mp4" autopLay></video> 
値 に は 、 こ こ で 挙げ た 例 の よう ーー ーー 
な URL 以外 に も パタ ー ン が あり 、 属性 は 、 要 素 に 定義 され て いる も の で あれ ば いく つ で も 指 
P28 で 紹介 し て いま す 。 定 で きま す 。 


本 書 の 表記 に つい て 
HTML5 で は 、 要 素 、 属 性 と も に 大 文字 で 記述 し て も 小文字 で 記述 し て も 問題 あり ませ 
ん が 、 本 書 で は アル ファ ベッ ト の 小文字 で 表記 を 統一 し て いま す 。 
また 、 構 文 の 紹介 箇所 で は 、 要 素 、 属 性 名 、 属 性 値 の 区 別 の た め 、 要 素 を 青 、 属 性 名 を 
緑 、 属 性 値 を 赤 に 色分け し て いま す 。 
属性 値 は 、 整 数 値 や アル ファ ベッ ト の み の 場 合 、 引 用 符 を 省略 で さま す が 、 本 書 で は す 
べ て の 属性 値 を 引用 符 で 囲ん で いま す 。 な お 、 「-1] や 「70%」 な ど 、 +、 -、 %、 # と いっ 
た 記号 を 伴う 場合 は 、 引 用 待 は 必須 で す 。 


宣 「r ビ ミ コ エ 


〇 つ 
こっ ュ 


ET 


「ML4 の 要素 は 、 段 落 や リス ト な どの 「 ブ ロッ ク 要 素 ]、 テ キス ト の 強調 や 装飾 を す 
る 「 イ ン ラ イン 要素 ] の ぶた つ に 分 けら れ て いま し た 。 
ITML5 で は 要素 を 「7 つ の カテ ゴリ ー」 に 区 分 けし 直し まし た 。 


・ メタ デー タ ・ コ ン テ ン ツ …body 要 素 の 外側 で 使わ れ 、HTML 文 書 の 概要 や 他 の 文書 
と の 関わ り を 示す た め の 要 素 の 集まり で す 。 

: フロ ー・ コ ン テ ン ツ …body 要 素 の 内 側 で 使わ れる ほとん どの 要素 が 入っ て いま す 。 

> セク ショ ニン グ ・ コ ン テ ン ツ … 見 出し か ら セ クシ ョ ン の 終わ り ま で の 範囲 を 示す 要素 の 
集まり で す 。 

> ヘッ ディ ング ・ コ ン テ ン ツ … セ クシ ョ ン の ヘッ ダー を 示す 要素 の 集まり で す 。 

> フレ ー ジ ング ・ コ ン テ ン ツ …HTML 文書 の テキ スト や 、 段 落 内 の テキ スト に 意味 付け 
を する 要素 の 集まり で す 。 

> エン ベ デ ッ ド ・ コ ン テ ン ツ …HTML 文書 内 に 画像 や 動画 や 音声 、 他 の HTIML 文書 な ど 
の 外部 リソー ス を 読み 込む 要素 の 集まり で す 。 

・ イン タラ クティ ブ ・ コ ン テ ン ツ … ユ ー ザ ー が 操作 で きる 要素 の 集まり で す 。 


_ 着 出 SF ミコ エー 


各 カ テ ゴ リ ー の 関連 性 は 右 の 図 の と お り 
で すず 。 

多く の 要 乏 は 基本 的 に フロ ー・ コ ン テ ン ツ | 人 還 還 間際 明 
で あり 、 他 の カテ ゴリ ー に も 属し て いま す 。 イン ダラ グティ ブ 

また HTML4 で は 、 要 素 内 に 内 包 で きる 目 エン ペデ ッ ド 
も の は ブロ ッ ク 要 素 や イン ライ ン 要 素 と 記 
載 さ れ て いま し た が 、HTML5 で は 、 各 要 メタ デー タ 
素 に 内 包 で きる も の は 、 フ ロー ・ コ ン テ ン 6 2 
イイ トコ 生 :httpy//wwmww3org/TR/html5/ 
ます 。 content-models.htm#kinds-of-content 

D 要 素 が 内 包 で きる も の : フレ ー ジ ング ・ コ ン テ ン ツ 
了 strong 要 素 が 内 包 で きる も の : フレ リージ ング ・ コ ン テ ン ツ 


各 カ テ ゴ リ ー に 含ま れる 要素 は 以下 の と お り で す 。 


剛昌 置 メ タデ ー タ ・ コ ン テ ン ツ 
base、command、lInk、meta、nosCript、script、style、title 


_ a、 abbr、address、area (map 要 素 の 子孫 で め ある と き )、article、aside、audio、 


b、bdi、 
datalist、del、details、dfn、div、d、 em、embed、fieldset、figure、footer、 


form、h1、 


kbd、keygen、Iabel、 


h2、h3、h4、h5、h6、header、hr、 
map、mark、math、menu、meter、 


bdo、blockquote、br、button、canvas、cite、code、command、 


、iframe、img、input、ins、 


nav、nOSCriDt、 


Object、Ol、OutDut、D、PDre、DrOgressS、q、「UDy、s、samp、sCript、section、 


select、small 


、Span、strong、style (scoped 属 性 が あめ る と き )、sub、sup、svg、 


table、 ht time、u、ul、var、video、wbr、 テ キス ト 


員 セ クシ ョ ニン グ ・ コ ン テ ン ツ 
article、aside、nav、section 


目 ヘ ッ デ ィ シ グ ・ コ ン テ ン ツ 
h1、 h2、 h3、h4、 h5、h6 


時 フレ ー ジ ング ・ コ ン テ ン ツ 

a (フレ ー ジ ング ・ コ ン テ ン ツ の み 含 
お と き )、abbr、area (map 要 素 の 
子孫 で め ある と き )、audio、b、bdi、 
bdo、Dbr、button、canvas、cite、 
code、command、datalist、del 
(メレ ウー ジジ シグ : コン シン デシ ツ の み 促 
お と き )、dfn、em、embed、 
iframe、img、input、ins (フレ ー 
ジン グ ・ コ ン テ ン ツ の み 含 お とぎ) 、 
kbd、keygen、label、map ( フ 
レー ジン ダグ コン デス ツ の が 宮 お と 


く body> 


<p> 
カテ の コー 二 コジ 。 
は じ め て の フレ ー ジ ング - て 


内 名 で きる も の : プレー ジンク ・ コン テン ツ | 
<strong>HTML</strong> 
</p> : 

</body> 


のり ビーン Ex・ コン テン ツ ' 
内 包 で きる も の : ヲ レ ー ジ ング ・ コ ン テ ン ツ 


P 要素 は 「 内 包 で きる も の : フ レー ジン グ ・ コ ン テ ン ツ ] 
と ある の で 、 フ レー ジン グ ・ コ ン テ ン ツ で ある strong 


要素 を 中 に 入れ る こと が で きま す 。 
<body> レー ジン ター コン テル 。 | 


内 包 で きる も の : フ 
<strong> 2 りー フ 庫 一 ・ コ ン テ ン ツ 、 


きる も の : フレ ー ジ ング ・ コンテンツ 
<P> は じ め て の HTML< > 


</strong> 
</body> 


| 
SOng は 「 内 包 で きる も の : フレ ー ジ ング ・ コ ン シ 

ン ツ 」 と ある の で 、 フ レー ジン グ ・ コ ン テ ン ツ で は な 
い p 要素 を 中 に 入れ る こと は で きま せん 。 


き )、mark、math、meter、noscript、object、output、progress、q、「ruby、s、 
samD、 SCript、 select、 small、 span、 strong、 suD、 sup、 svg、 textarea、 time、 U、 


ar「、VIdeO、WwDbr、 テ キス ト 


上 エン ベ デ ッ ド ・ コ ン テ ン ツ 


audio、Canvas、embed、iframme、img、math、object、svg、video 


目 イ シタ ラク ティ ブ コラ デシ ツ 


a、audio (Controls 属 性 が あめ る と き )、button、details、embed、iframe、img (usemap 


必 


video (controls 属 性 が ある と き ) 


属性 が ある と き )、input (type 属 性 が hidden で な いと き )、keygen、label、menu(type 
陸 が toolbar で な いと き )、object (usemap 属 性 が ある と き )、select、textarea、 


セク ショ ン 


HTML5 で は セク ショ ン と いう 考え 方 が 導入 され まし 
た 。 セク ショ ン は 、 テ ー マ に よっ て 区 切ら れ た 文章 の 集 
まり で す 。 書籍 で 言う と ころ の 、 章 や 節 と 呼ば れる も の 
で す 。 

HTML4 で は 、 見 出し 要素 を 使っ て VeD ペ ー ジ の 階層 
構造 を 作り ます が 、 ど ご どこから どこ まで が 階層 構造 の 範囲 
か を 明確 に 示す こと は で きま せん で し た 。 

HTML5 か ら は 、 セ クシ ョ ニン グ ・ コ ン テ ン ツ で ある 
article 要 素 、aside 要 素 、nav 要 素 、section 要 素 の 4 
つの 要素 に よっ て 、 階 層 構 造 の 範囲 を 示す こと も で きる 
よう に な り ま し た 。 


中 セク ショ ニン グ ・ コ ン テ ン ツ 内 は すべ て h1 要 素 ? 

セク ショ ニン グ ・ コン テン ツ か が 階層 構造 を 作る た め 、 
見 出し 要素 は 必須 で は あり ませ ん 。 セク ショ ニン グ ・ コ 
ン テ ン ツ 内 に 見 出し 要素 を 入れ た 場合 、 見 出し 要素 は セ 
クシ ョ ン の 概要 を 示し ます 。 つま り セ クシ ョ ニン グ ・ コ 
ン テ ン ツ を 使う 場合 、 h1、 h2、 h3 と いう 見 出し 要素 の 
ラン ク は あま り 意 味 が な く な る た め 、 す べ て h1 要素 で 
OK に な り ま す 。 

た だ し 、CMS で の ペー ジ 制 作 や ブロ グ の 記事 投稿 な ど 、 
WYSIWYG エ ディ タ で ペー ジ 制 作 を する 際 は セク ショ 
ニン グ ・ コンテンツ を 入力 で き な い の で 、 h1、h2、 h3 
と いう 見 出し 要素 の ラン ク に よる 階層 構造 を 利用 する こ 
と に な る で し ょ よう 。 


邊 アウ トラ イン 


Elate【: 」 


section | 


section 4 


section 
、 HTML5 の セク ショ ニン グ ・ 
コン テン ツ を 利用 し た 階層 構造 


見 出し 要素 や セク ショ ニン グ ・ コ ン テ ン ツ が 作る 階層 構造 を 、 ア ウト ライ ン と 言い ます 。 


アウ トラ イン は 、Google Chrome で あれ ば HTML5 Outliner と いう 拡張 機能 で 確認 


で きま す 。 


軸 セ クシ ョ ニン グ ・ ル ー ト 


元 の アウ トラ イン か ら 和 独立 し た アウ トラ イン を 作る 要素 を 、 セ クシ ョ ニン グ ・ ル ー ト と 


言い ます 。 


Web ペ ー ジ は 、body 要 素 (= セク ショ ニン グ ・ ル ー ト ) の 作る セク ショ ン が 最初 の 


クシ ョ ン と な り ま す 。 


セク ショ ニン グ - ルー ト で ある 要素 は 以下 の と お り で す 。 
blockquote 要 素 、body 要 素 、details 要 素 、fieldset 要 素 、figure 要 素 、td 要 素 


<body> 


< く d1v 1d="header">HTML5 リ ファ レン ス </div> 


<d1v 1d=Wnav"> 
< く ut> 


<ti><a href=!#honbun"> 本 文 </a></11> 


<i><a href=!#sampte"> ソ ー ス サン プル </ 


a></ 11> 

く /ut> 

| </div> 

<d1v id=Wart1cte リ > 
<h1> セ クシ ョ ン の し くみ </h1> 
」 <div id="honbun"> 
<h2> 本 文 </h2> 


く /div> 
<d1v 1d=Wsampte!> 
<h2> ソ ー ス サン プル </h2> 


</d1iv> 
く /d1v> 


<div id="footer">copyr1ght&copyj セ ク 


<body> 1 
<header>HTML5 リ ファ レン ス </header> 
く nav> 

< く ut> ] 
<Li><a href=! 蜂 honbun"> 本 文 </az</t1> | 
<LUi><a href="#sampte"> ソ ゾー ス サ ン プル </ 
| az く </11> | 
| </ut> 1 
く /naV> | 
く art1cte> | 
<ht> セ クシ ョ ン の し くみ </h1> | 
<section 1d="honbun"> | 
<ht> 本 文 </h1> 1 


</ sect1on> 
<sect1on 1d=Wsampte リ > | 
<h1> ソ ー ス サン プル </hl> | 


く /sect1on> 
く /art1ctLe> | 
<footer>copyr1ght&copy: セ クシ ョ ン の し くみ , 


ショ ン の し くみ </d1v> </footer> 
</body> </body> 1 
HTML4 の 場合 HTML5 の セク ショ ニン グ ・ コ ン テ ン ツ を 


中 Web ペ ー ジ で の セク ショ ニ 


利用 する 場合 


ング ・ コ ン テ ン ツ の 利用 例 


header 


naV 


naV 


aside 


(G)Copyright ここ 


footer 


H 
6 
M 
し 
0 
は 


Web ペ ー ジ を 作る ファ イル に は 、HTML フ ァイル 、CSS ファ イル 、javaScript フ ァイル 、 
画像 ファ イル な ど 様 々 な ファ イル が あり ます 。 

これ ら の ファ イル 名 は 、 必 ず 「 フ ァイル 名 . 拡 張子 ] と いう 名 前 の 形式 で 保存 され て い 
る 入 要 が あり ます 。 


員 フ ァイル 名 の ルー ル 
ファ イル 名 は 、 下 記 ル ー ル を 守っ て いれ ば 自由 に つけ る こと が で きま す 。 


: 半角 英 数 字 (A-Z、a-z、9-9) と - _ . だ け を 使う こと 
> スペ ー ス 、 タ ブ を 訪 ま な いこ と 


中 拡張 子 の ルー ル 
拡張 子 は 、 フ ァイル の 内 容 と 対 で Web サ ー バ ー (ファ イル を 置く WWeb 上 の 場所 ) や 
OS に 登録 され て いま す 。 その た め 、 決 まっ た 拡張 子 名 を 使う 必要 が あり ます 。 


: HTML フ ァイル …html 

: CSS ファ イル …Css 

: Javascript フ ァイル …:j5 

: 画像 ファ イル …GIF 形 式 (gi)、 JPEG 形 式 (jpg)、 PNG 形式 (png) 


中 OS と Web サ ー バ ー の 違い 

OS と Web サ ー バ ー で は 、 英 大 文字 と 小文字 の 扱い が 異な り ま す 。 

〇 5 上 で は 、 大 文字 と 小文字 は 同じ 文字 と し て 認識 され る た め 、 「A.htmll と 「a.html 
は 同じ ファ イル 名 と し て 認識 され 、 同 じ 階 層 に 置く こと が で きま せん 。 

し か し 、Web サ ー バ ー 上 で は 、 ア ルフ ァ ベ ッ ト の 大 文字 と 小文字 は 別 の 文字 と し て 誰 
識 ぐ れる た め 、 上 の ぶた つの ファ イル は 同じ 階層 に 置く こと が で きま す 。 

この 違い の た め 、 一 般 的 に は 混乱 を 招 か な いよ うに 、 フ ァイル 名 は すべ て 小文字 で つけ 
られ ます 。 


ファ イル の 整理 


Web ペ ー ジ を 作っ て いく と 、 フ ァイル が どん どん 増え て いき ます 。 同 じ 場 所 に ファ イ 
し を た くさ ん 置く と 、 編 集 し た い フ ァイル を 見 つけ に くく な っ て し まい ます 。 フ ァイル を 
見 つけ や すく する た め に は 、 階 層 (ディ レク トリ ) を 作っ て 整理 する 必要 が あり ます 。 よ 


く あ る 整理 の 例 を 見 て み ま し よう 。 

中 ファ イル の 種類 ご と の ディ レク トリ 「 ゃ 編 css | 
階層 の 作り 方 に は いろ いろ な 種類 が 考え られ ます が 、 ま | style.css | 

ず は 下記 の よう に ファ イル の 種類 ご と に ディ レク トリ を 分 | 『M 細 img 

け て 整理 し まし ょ う 。 | 帳 Image.png 

|Y 念 j | 

: HTML ファ イル … そ の まま 置く | 計 script.js | 

- CSS フ ァイル …css デ ィ レ クト リ 人 ndexhtml 

: 」avascript ファ イル …js デ ィ レ クト リ ファ イル の 種類 ご と に 

・ 画像 ファ イル …img デ ィ レ クト リ ディ レク トリ を 分 けた 例 

有 邊 カテ ゴリ ー ご と の ディ レク トリ | を 回 | company 
Web サ イト に は 様々 な 情報 が 掲載 され ます が 、 扱 う 内 容 |『I 較 contact 

で カテ ゴリ ー に 分 け て 整理 する こと が で きま す 。 | 思 news 


例え ば 、「 お 知ら せ 」 「 製 品 情 報 」「 会 社 情報 ]「 お 問い 合わ せ 」 | 見 ee 
と いう カテ ゴリ ー が ある と し た ら 、 下記 の よう に 、 その カー | 


テ ゴ リ ー ご と に ディ レク トリ を 分 け て 整理 で きま す 。 カテ ゴリ ー ご と に 


ディ レク トリ を 分 けた 例 
: お 知ら せ …news デ ィ レ クト リ 
: 製品 情報 …product デ ィ レ クト リ 
: 会 社 情報 …company ディ レク トリ 
: お 問い 合わ せ …contact デ ィ レ クト リ . 


ーー 
| 
| 
| 
| 
| 
| 
| 
] 


人 太 2042 | 

年 ・ 月 で と の ディ レク トリ p 調 01 | 

制作 し た 日 付 で 見 つけ た い フ ァイル は 、 年 ・ 月 の ディ レ | 『 剛 9z | 
クト リ に 分 け て 整理 する こと が で きま す 。 例え ば 、 下 記 の 『 93 

よう に 年 、 月 は ディ レク トリ を 分 け て 整理 で きま す 。 Y 上 94 | 

| 間 01.html 

: 年 …2013 デ ィ レ クト リ 、2014 デ ィ レ クト リ な ど ] * 02.html 

- 月 …01 ディ レク トリ 、02 デ ィ レ クト リ な ど | * 03.html 


: 日 …01.html、02.html な ど 


下 fr ビ コ エ 


バス 

制作 し た HTML ファ イル は 、 パ ソコ ン の 中 の 特定 の ディ レク トリ に あり ます 。 

例え ば 、work デ ィ レ クト リ 内 の index.html を Mac や UNIX で 示す と き に は 、 
Work/index.html と 記述 で きま す 。 

work デ ィ レ クト リ が 他 の ディ レク トリ に 入っ て いる の で あれ ば 、Users/gihyo/ 
Desktop/work/index.html な ど と な り ま す 。 

Windows で は Users\gihyo\Desktop\work\index.html と 記述 で きま す 。 

この よう に 、 ス ラッ シュ (/) や 円 マー ク (\) で 区 切っ て ディ レク トリ 構造 を 示し た 
も の を パス と 言い ます 。 


URL (Uniform Resource Locator) 
" 制作 し た HTML フ ァイル を Web 上 に 公開 する た め に は 、 Web サ ー バ ー に それ ら の ファ 
イル を 移す 必要 が あり ます 。 

それ は 、 一 般 的 な パソ コン は Web に 公開 する 場所 を 持っ て いな いか ら で す 。 WVeb サ ー 
バー は Web に 公開 する 場所 を 持っ て いる た め 、 フ ァイル の ある 場所 を ブラ ウザ で 指定 す 
れ ば 、 世 界 中 の 誰 で も 同じ ファ イル を 見 る こと が で きま す 。 

ブラ ウザ で 指定 する ファ イル の 場所 を 、URL (Uniform Resource Locator) と 言い 
ます 。 

URL は 、 上 述 の パス に 加え て スキ ー ム と ホス ト 名 を 記述 し ます 。 


スキ ー ム … フ ァイル を 取得 する た め の 手 段 。 一 般 的 な の は http 
ホス ト 名 …VWeb サ ー バ ー に 割り 当て た 名 前 


例え ば 、http://gihyo.jp/book/index.html と いう URL が ある と き 、 分 解す る と 下 
記 の よう に な り ま す 。 


スキ ー ム …http 
ホス ト 名 …gihyo.jp 
パス …/ book/index.html 


パス を 区 切る 文字 が スラ ッシュ (/) な の は 、Web サ ー バ ー が UNIX ベ ー ス の 端末 だ 
か ら で す 。 


Web サイ ト 内 の ファ イル 位置 


HTML フ ァイル か ら は 、 様 々 な ファ イル を 参照 し ます 。 参照 する に は 、 参 照 先 の ファ 
イル の 位置 を 表す 必要 が あり ます 。 

参照 元 の ファ イル を 基準 に パス を 書く 方 法 を 相対 パス 、Web サ イト の 一 番 上 の 階層 を 
基準 に パス を 書く 方 法 を 絶対 パス と 言い ます 。 「 マ 太 wsk 

右 の よう な ディ レク トリ 構造 の WWeb サ イト が ある と Y 還 im | 
し ます 。 work デ ィ レ クト リ 内 に ある indexhtm か ら 。 。 Sr 
他 の ファ イル を 参照 する パス を 書く と き 、 相 対 パ ス と 絶 g index.html | 
対 パ ス で どう 違う か 見 て み ま し よう 。 に AROPR 1 
相対 パス 


相対 パス で は 参照 元 の ファ イル を 基準 に 書き ます 。 HTML ファ イル に パス を 書く の で 
あれ ば 、 そ の HTML ファ イル が 基準 に な り ま す 。 


: Work ディ レク トリ 内 の getailLhtml…detaiLhtml 
- Work デ ィ レ クト リ 内 の img デ ィ レ クト リ 内 の img_index.Dng…WOK/img/img_index.png 
- Work ディ レク トリ の 上 の 階層 の top.html….…/top.html 


同じ 階層 は ファ イル 名 その まま で 書き ます 。 下 の 階層 の ファ イル は 、 デ ィ レ クト リ 名 と 
ファ イル 名 を 「/ (スラ ッシュ )」 で 区 切っ て 書き ます 。 6 

上 の 階層 は 「../] と 書い て ファ イル 名 を 書き ます 。「../] は ひと つ 階 層 を 上 が る こと を 
示し ます 。 ふ た つ 上 の 階層 の ファ イル を 示す の で あれ ば 、「../../] と 同じ 記号 を リピ ー ト 
し た 後に ファ イル 名 を 書き ます 。 


邊 組 対 パス 
Web サ イト の 一 番 上 の 階層 を 基準 に パス を 書き ます 。 
: work デ ィ レ クト リ 内 の detaiLhtml…/work/detaiLhtml 
> Work デ ィ レ クト リ 内 の img デ ィ レ クト リ 内 の img_index.png…/Work/img/img_index.Dng 
= work デ ィ レ クト リ の 上 の 階層 の top.htmL-…/top.html 


絶対 パス で は 参照 元 の ファ イル が どこ の 階層 に あっ て も 、 参 照 先 の パス は 同じ に な り ま 
す 。 一 番 上 の 階層 の ファ イル は 、 左端 に 「/] を 書い た 後に ファ イル 名 を 書き ます 。 
一 段 下 の 階層 の ファ イル は 、 左端 に 「/」 を 書い た 後に ディ レク トリ 名 と ファ イル 名 を 「/ 
(スラ ッシュ )」 で 区 切っ て 書き ます 。 

WVeb 上 に ある ファ イル を 示す と き は 、 ス キー ム (http) と ホス ト 名 (gihyojp) を 豆 
に つけ て (http://gihyojp)、 デ ィ レ クト リ 名 と ファ イル 名 を 記述 し た の が 絶対 パス と 
な り ま す 。 


の 
1 


書 「r ミー エ : 


属性 値 の バリ エー ショ ン 


属性 値 に は 、 入 力 値 に 制限 の あま りな い 属 性 も あれ ば 、 数値 の み だ っ た り 、 決ま っ た 言 
葉 ( に 制限 する 属性 も め り ま す 。 
以下 に 属性 の パタ ー ン を まとめ て 紹介 し ます 。 


中 真 偽 値 

真 偽 値 を 受け 入れ る 属性 は 属性 値 を 持た ず 、 属 性 が ある か な いか で 要素 の 特性 を 示し 
ます 。 下記 の 例 は 選択 肢 「 チ ー ズ 」 が 選択 され て いて (checked)、 か つ 使 用 で き な い 
(disabled) 状態 を 示し て いま す 。 

checked と disabled は 真 偽 値 の 属性 で す 。 


<tabet><1nput て ype="checkbox" checked name="cheese" disabted> チー 
ズ </tabet> 


員 キ ー ワ ー ド 
決ま っ た キー ワー ド が ある 属 柱 は 、 そ の キー ワー ド で 要素 の 特性 を 示し ます 。 
下記 の 例 は 、 テ キス トリ ンク の テキ スト を 編集 で きる (contenteditabte="true") 
状態 を 示し て いま す 。 
contenteditable 属 性 は 、true と false の キー ワー ド を 持つ 属性 で す 。 


<a href="http://g1hyo.jp" contenteditabte="true"> 技 術 評論 社 </a> 


上 数値 
数 値 に 関わ る 属性 は 、 下 記 の よう な 値 を 属性 値 に 指定 する こと で 要素 の 特性 を 示し ます 。 


* 整数 (-3、-2、-1、9、1、2、3…) 

> 少数 (-9.3、-9.2、-9.1、9、9.1、9.2、9.3…) 
: バー セン テー ジ (19%、21%、35%…) 

: 整数 の リス ト (「9,19,29,39] な ど ) 


下記 の 例 は 、video 要 素 の 幅 (width="e49") と 高 さ (heght="486") を 指定 し た 
状態 を 示し て いま す 。 
width 属 性 、height 属 性 は 数 値 を 指定 する 属性 で す 。 


<v1ideo src="video.mp4" width="649" heght="480"></v1deo> 


BN 人 SHE 
日付 と 時 刻 
付 と 時 間 に 関わ る 属性 は 、 下 記 の よう な 値 を 属性 値 に 指定 する こと で 要素 の 特性 を 示 
し ます 。 

: 年 月 (2914-91 な ど ) 

: 日 付 (2614-91-91 な ど ) 

: 年 な し の 日 付 (91-91 な ど ) 

: 時 刻 (91:59:39 な ど ) 

: 日 付 と 時 刻 (2614-91T91:59:39 な ど ) 

> タイ ム ゾ ー ン (+9:99 な ど ) 

: グロ ー バ ル な 日 付 と 時 間 (2614-91T91:59:39+9:99 な ど ) 

: 週 (2014-W91) 


下記 の 例 は 、time 要 素 | に に お 正月 の 年 月 日 (datetime="2914-91-91") を 指定 し た 状 
態 を 示し て いま す 。 


datetime 属 性 は 日 付 や 時 間 を 指定 する 属性 で す 。 


< て 1me datet1ime="2914-91-91"> お 正月 </t1me> 


晶 色 

色 に 関わ る 属性 は 、 赤 ・ 緑 ・ 青 を 表し た 値 を 属性 値 に 指定 する こと で 、 要 素 の 特性 を 示 
し ます 。 

色 を 表す 値 は 、 赤 ・ 緑 ・ 青 の 色 を それ ぞ れ 256 段 階 9255) で 表し た も の を 、16 
進数 に 変換 し て 、 頭 に 「#] を つけ た 値 に な り ま す 。 


: #999999… 黒 ( 赤 :0、 緑 :0、 青 :0) 
: #ffffff… 円 ( 赤 :255 (16 進 数 で は ff)、 緑 :255 (16 進 数 で は ff)、 
青 :255 (16 進 数 で は ff) ) 
: #ff9990… 赤 ( 赤 :255 (16 進 数 で は ff)、 緑 :0、 青 :0) 
: #9999ff… 青 ( 赤 :0、 緑 :0、 青 :255 (16 進 数 で は ff) ) 
: #ffff99… 黄 ( 赤 :255 (16 進 数 で は ff)、 緑 :255 (16 進 数 で は ff)、 青 :0) 


下記 の 例 は 、input 要 素 に 赤色 (vatue="#ff9909") 
を 指定 し た 状態 を 示し て いま す 。 R:255 G:0 B:0 

input 要 素 の type 属 性 値 が color の と き 、value 属 性 | 』。。 。、 。 
は 色 を 指定 する 属性 と な り ま す 。 


#ff 。 99 99 
| 
赤 を 表す 属性 値 の 例 


<1nput type="cotor" vatue="# 和 ff9099"> 


時 MIME タ イプ 


MIME タイ プ ファ イル の 種類 拡張 子 
MIME タ イプ に 関わ る 属 テキスト モ 
4 較 当 こ 。 text/pta テキ スト ファ イル -txt 
5 ニー PS SR 
性 値 に 指定 する こと で 要素 text/css CSS ファ イル .CSS 
の 特性 を 示 赤き 。 て tex て /]avascr1pt JavaScr1pt ファ イル PE 
MIME タ イプ は 、 フ ァ イ 1mage/g1f GTF ファ イル .g1f 
ル 形 式 を 「 タ イプ 名 / サ ブタ 3ge/png PNG ファ イル Jo 
イプ 名 | で 示し た も の で す 。 mage/]peg JPEG ファ イル ・]JPg ・〕peg 
下記 の 例 は 、 音 声 フ ァ イ Me イン .mp4 .m4v 
叶 video/o 0gg ファ イリ es 2 
ル と し て Source 要 系 に Ogg 5 Eo ファ イル 5 5 
ァイル (type="aud1o/ 
1 ア do/, AAC ファ イル る 
10 本 MR CE MP4 2 rr .m4a 
= SYOIUDG 各 ) を 指定 し adiO7mpeeg MPEG ファ イル .mp1 .mp2 .mp3 
た 状態 を 示し て いま す 。 ミ ーー 
audio/ogg 0gg ファ イル ・Ogg ・Oga 
type 属 性 は 、 MIME タ イ audio/wav WAVE ファ イル .WaVv 
ブ を 指定 する 属性 で す 。 audio/webm webM ファ イル .webm 
く aud1o controts> 
<source Src="Waudio.ogg'"' て ype="audio/ogg"> 
<source Src='"audio.mp3" て ype="audio/mpeg "> 
く / aud1o> 
量 言 語 コ ー ド 
言語 コー ド に 関わ る 属性 は 、 下 記 の よう な 値 を 属性 値 恒 計 言語 名 
に 指定 する こと で 、 要 素 の 特性 を 示し ます 。 紀 と 
言語 コー ド は 、「- 0⑦\ イ フン )」 に よっ て 分 けた ひと つ 還 ) ー 訓 hos 語 
以上 の 下位 タグ (「 言語] 「 文 字体 系 ] 「 地 域 | な ど ) で 構 en 語 
成 さ れ ま す 。 下位 タグ の [言語] は 必須 で す 。 は エス ペラ ント 語 
ie ペイ ン 語 
下位 タグ の 詳細 は 、「 言 語 ] は ISO 639-1、「 文 字体 系 ーー 
は ISO 15924、「[ 地 域 | は ISO 3166-1 alpha-2 に ま と F イタ リア 語 
め ら れ て いま す 。 例 えば 、 言 語 と 文字 体系 の 組み 合わ せ E 日 本 語 
で 「zh-Hans」 (簡体 字 中 国語 ) や 「Zh-Hant] (繁体 字 ーー 
中 国語 ) を 示す こと も で きま す 。 本 
下記 の 例 は 、html 要 素 に 日 本 語 (tang="a") を 指定 Pt ボ ポルトガル 語 
し た 状態 を 示し て いま す 。 E ーー 
lang 属 性 は 、 言 語 コー ド を 指定 する 属性 で す 。 ンー 


<htmt tang="]a"> 


@|@@l@|0| 間 @ 


ブラ ウザ 上 で テキ スト を 編集 する 


7 


@ 
( 空 文字 、true、false) 
・ ブラ ウザ 上 で 編集 する テキ スト 


較 く <D MIN JNN 0 
・ ブラ ウザ 上 で の テキ スト 編集 の 可否 


H 
M 
L 
の 
基 
本 


contenteditable 属 性 は 、 ブ ラウ ザ 上 
で テキ スト を 編集 で きる よう に する 属性 で 
す 。 属 性 値 ( 供 ) は 、 以 下 の 3 つ か ら 選 択 
で きま す 。 


: 空 文字 、true… ブ ラウ ザ 上 で 編集 可能 
: false… ブ ラウ ザ 上 で 編集 不可 


NISDkBCUINUB 開 時 Mb 
合 、 親 要素 の 状態 を 引き 継ぎ ます 。 
お bee は 、「 海 洋 深 層 水 ] と いう テ 
キス ト を contenteditable 属 性 で 編集 可 
能 に 指定 し て いま す 。 その た め 、 ブ ラウ ザ 


で 表示 し た と き に 、「 海 洋 深層 水 ] を クリ ッ 
ク し て テキ スト を 書き 換え る こと が で きる 
よう に な り ま す 。 


サン プル ソー ス 閣 


< く !DOCTYPE htmL> 


<htmt tang="]a"> 

く <head> 

<meta charset= リ utf-8!> 

<tjtte> ブ ラウ ザ 上 で テキ スト を 編集 する </titte> 
< く /head> 

< く body> 


| <p> 編 集 不可 : 残り の 人 生 も 砂糖 水 を 売り た いか ? <br> 


編集 可能 : 残り の 人 生 も <span contenteditabte 
| ="Erue リ > 海洋 深層 水 </span> を 売り た いか ?</p> 
</body> 
| </htmt> 


有 ラ TS 


ブラ ウザ 本 志和 Hb 


481 の た も 
FESnukk 


編集 不可 : 残り の 入 生 も 砂糖 氷 を 売り た いか ? 
| 編集 可能 : 残り の 人 生 も 海洋 深 悦 水 を 売り た いか ? 


9@@@@O 生 @ 
を 旦 す 


斗 瞳 3 ビ ミコ エ 


に <div hidden> 電 </div> 


⑯ …… まだ 関連 性 が な い 、 
も し く は すでに 関連 性 が な い 内 容 | 


| 


8 ダ 
hidden 属 性 は 、 指 定 し た 要素 の 中 身 が サン プル で は 、「 あ め 玉 、] と いう テキ スズ 
まだ 本 文 に 関連 休 が な い 、 も し く は すでに ト に hidden 属 性 を 指定 し て いま す 。 その 
関連 性 が な い ) 内 容 で ある こと を 指定 する 属 た め 、 ブ ラウ ザ 上 で は 表示 され て いな いこ 
| 性 で す 。 と が わか が り ま す 。 
例え ば 、 ロ グイ ン が 必要 な ゲー ム で 、 口 
グイ ン 後 は ログ イン 画面 を 非 表 示 に し て お 
く な ど 、 一 度 通則 し た ら 戻 ら な い 内 容 は 表 
示 / 非 表示 の 切り 替え で 利用 する の が 適切 
で す 。 タ ブ で 切り 替え る コン テン ツ な ど に 
も 表示 / 非 表示 状態 が め り ま す が 、 い つ で 
も 表示 を 切り 替え られ る 内 容 に 利用 する の 
よ 適 切 で は あり ませ ん 。 


H 
U 
M 
邊 
記 
は 


N 議 較 フラ ウサ 


| <!DOCTYPE htm い > | 
<htmt tang="]a"> る 鍋 に は 叶 四 ゃ まず 
<head> | 人 ho な 3 まう な 
<meta charset="utf-8 リ > | ポコ ン で 本 加 て た 
| <titLe> 表 示 を 隠す </titte> | | 

上 中 昭 」 

」 </head> 
<body> 


<p> イ ラス ト に ある も の : iPad、<span hidden> 

| あめ 玉 、</span> ジ ョ ブ ズ の 名 言 </p> | 
| <p> お や 、 あ め 玉 は ?</p> | 
、 </body> | イラ スト に ある も の : iPad、 ジ ョ ブ ズ の 名 言 
</htm> | お や 、 あ め 玉 は ? 


| 


: 関連 
032 | ぐ ) ま の 表示 方 法 (P253) 


8 る eeeo# ぁ 
自動 で スペ ル チ ェ ッ ク す る 


状 暗 S- ミ コ エ 


便 自動 スペ ベルチェ ッ ク の 可否 ( 空 文字 、true、false) 
今 … スペ ル チ ェ ッ ク を する テキ スト 


W b/ 


spellcheck 属 性 は 、 テ キス ト の スペ ル spellcheck 属性 を 指定 し な い 場 合 、 親 
チェ ッ ク を する が どう が を 指定 し ます 。 例 要素 の 状態 を 引き 継ぎ ます 。 
えば Opera で は 、 ス ペル チェ ッ ク を する サン プル で は 、 テ キス ト ボ ックス の 
よう に 指定 し た 要素 に 、 ス ペル の 間違っ た spellcheck 属 性 で スペ ル チ ェ ッ ク を 行う 
テキ スト を 入れ る と 、 赤 の 点線 を 表示 し ま を 指定 し て いま す 。 その た め 、 ブ ラウ ザ 上 


す 。 で は 「pirte」 (正しく は pirate) に 赤い 
属性 値 ( 介 ) は 以下 の 3 つか ら 選 択 で き 破線 が 引か れ 、 ス ペル ミス 表示 を し て いる 


ます 。 こと が わか が り ま す 。 


: 空 文字 、true… ス ペル チェ ッ ク を 行う 
: false… ス ペル チェ ッ ク を 行わ な い 


サジ ブル ソー ス 
<!DOCTYPE htmt> | 
<htmt tang="]a"> 

| 


) 全 EEE55 証 


<head> 

< く meta charset= リ Wutf-8 リ > 

<titte> 自 動 で スペ ル チ ェ ッ ク す る </tjtte> 1 

| aa 
</head> 1 3 くわ っ 


<body> 


中 略 電 虹 、N | 

<p> き み は ど うだ い ? <br> 、 を ほう が 

< く 1nput type="text" spettcheck="t て rue 13+ 

) Vatue=!Navy or Dirte?"> く </P> 

</body> 

</htmt> 上 | 
きみ は どう だ い ? 
INaworaiegd | | 


033 


eeeeose 
翻訳 させ な いよ うに する 


品 | 
T 
M 
L 
の 
其 
本 


<div transtate=" 電 "> 全く </d1v> 


価 … テキ スト の 翻訳 の 可否 ( 空 文字 、yes、no) 
人 る … 翻訳 させ な い テ キス ト 


translate 属 性 は 、 テ キス ト の 翻訳 の 可 translate 属 性 を 指定 し な い 場 合 、 親 要 
否 を 指定 する 属性 で す 。 商品 名 な どの 固有  - 素 の 状態 を 引き 継ぎ ます 。 

名 詞 、 引 用 し た 作品 中 の 文章 な ど 、 翻 訳 さ サン プル で は 、「Stay hungry, stay 
れる と か えっ て 理解 し に くく な る テキ スト foolish.」 と いう テキ スト に translate 属 


を 、 翻 訳 さ せな いよ うに する た め に 利用 し 性 で 翻訳 させ な いよ うに 指定 し て いま す 。 


ます 。 その た め 、 translate 属 性 に 対応 し て いる 
属性 値 ( 信 ) は 以下 の 3 つか ら 選 択 で き 翻訳 サー ビス で は テキ スト が 翻訳 され な い 
ます 。 で し よう 。 


* 空 文字 、yes… 徳 訳す る 
* no… 翻 訳し な い 


「 ブラ ウザ 表示 


く !DOCTYPE htmt> 

」 <htmt tang=" け a"> | SteY hunar ら 
<head> stey Too い < 

」 <meta charset="!utf-8!!> En 

| <titLe> 翻 訳 させ な いよ うに する </titLe> 

上 中 申 」 

</head> 

< く body> 


| 
| <p> く Span て ranstate="no">Stay hungry, | 
| stay fooLish.</span> く br> 


1 
| 翻訳 は 不要 だ よね 。</p> | 
1 | 
| 


</body> 
</htmt> 6 
| | Stay hungry, stay foolish. 
| | 翻訳 は 不要 だ よね 。 
034 


HTML 文書 の 構造 と DOCTYPE 宣言 


四 HTML 文 書 の 構造 

HTML 文書 は 、 ま ず DOCTYPE 宣 言 か ら 始 まり ます 。 

その 後に html 要 素 (<htmu> て </htmt>) を 記述 し ます 。html 要 素 の 中 に は 、head 
要素 (<head> </head>) と body 要素 (<body> 一 </body>) を 記述 し ます 。 


四 DOCTYPE 宣 言 

DOCTYPE 宣言 に は 、HTML の バー ジョ ン が 記述 され ます 。 

以前 は HTML4 や XHTML1 な どの バー ジョ ン を 示す た め に 、 文 書 型 (DTD) を 記述 
し て いま し た が 、HTML5 で は 文書 型 の 記述 が な いこ と 自体 が HTML5 を 示す た め 、 不 要 
と な り ま し た 。 1 


邊 ヘッ ダ (head 要 素 の 中 ) 

ヘッ タダ 部 分 は 、 ペー ジ の 概要 で す 。 

title 要素 (<titte> て </titte>) で ペー ジ タ イ トル を 示し 、meta 要 素 (<meta> 
</meta>) で 文字 コー ド や 概要 文 を 示し ます 。 

また 、Ilink 要 素 (<tink>) で CSS ファ イル の 読み 込み 、SCript 要 素 (<script>) で 
javaScript ファ イル の 読み 込み が で きま す 。 


中 ボディ (body 要 素 の 中 ) 
ボディ 部 分 は 、 文 書 の 本 体 で す 。 ブラ ウザ | DOCTYPE 宣言 

に 表示 され る 部 分 に な り ま す 。 | | <IDOCTYPE htmt> | 

article 要 素 (<articte> て </articte>) 、 <htmt tang="a"> 

、 section 要 素 (<section> ご </section>) | <heag> ヘッ ダ 

0 な ど で 敢 タ シ ョ ン 和 を 示 も 、 hi 要素 sh1> | | ed。 haraetrutf-sy 

、 </hr>) な ど で 見 出し を 示し ます 。 | 
また 、p 要 素 (<p> て </p>) で 段落 を 示 | 


<ttte>HTML 文書 の 構造 </t1tte> 


し た り 、a 要 素 (<a></a>) で 他 の ペー ジ | 3 

へ の リン ク テ キ スト を 示し た り 、Video 要 素 || <poqy> 
(<video> て </video>) で 動画 を 表示 し た || <nn> 見 山 し </ha> 
りす る こと が で きま す 。 


<p> 本 文 </p> 
</body> 
</htm1> 


サン プル ソー ス | 


ら 6@ew@O き る 


基本 の HTML ファ イル を 作る 


人 較 
| 


<head> 廊 </head> 

<body> 今 </body> 

「 言語 コー ド 

… マニ フェ スト ファ イル の URL 


ー・ ヘッ タタ 情報 
… Web ベ ペー ジ 本 体 


る オキ 回 @ 


<htmt 1ang="@" manifest=! 全 "> 田 </htmt> 


… HTML の ソー ス (<head> 文 </head><body> 氏 </body>) 


[ カテ ゴリ ー McW head 要素 と その 後に 続く body 要素 


html 要 素 は 、HTML 文書 の ルー ト ( 根 っ 
こ ) を 示し ます 。 すべ て の HTML の 要素 は 、 
html 要 素 の 中 に 入り ます 。 

Iang 属 性 は 、 文 書 で 主 に 使用 され る 言 


manifest 属 性 は 、 マ ニ フ ェ スト ファ イ 
ル の URL を 指定 し ます 。 

マニ フェ スト ファ イル は テキ スト ファ イ 
ル で 、 オ フラ イン 時 に 閲覧 で きる よう に ブ 


語 を 言語 コー ド (30 ペ ー ジ 参照 ) で 示し 
ます 。 

html 要 素 の lang 属 性 は 、 音 声 合成 ツ 
ル で は 発音 の し か た を 決定 する の に 使わ 
れ 、 徳 訳 ツ ー ル で は 翻訳 の し か た を 決め る 
の に 使わ れる た め 、 指 定 し て お く こ と が 推 
奨 さ れ て いま す 。 


| <!DocTYPE htmt> 
| <htmL tang="]a"> 
<head> 
| <meta charset='utf-8"> 
<titLe>HTML フ ァイル の 骨組 み を 作る </ て itte> 
中 略 ] 
</head> 1 
く <body> | 


EH3 

<p> 「 七 人 の 桜井 | <br> | 
制作 年 度 : 1954 年 監督 : 黒川 明 </p> 
</body> 

く </htmt> 


ラウ ザ に 保存 する ファ イル や 、 オ ン ラ イン 
時 に 必ず サー バー か ら 取 得する ファ イル を 
記述 し ます 。 

head 要 素 は 、HTMIL 文書 の 概要 (タイ 
トル 、 説 明文 、 キーワ ー ド な ど ) の 集まり 


を 示し ます 。body 要 素 は 、HTMIL 文書 の 
本 体 を 示し ます 。 


『 七 人 の 桜井 』 
制作 年 度 : 1954 年 監督 : 黒 川 明 


関連 : 
で ) 用人 値 の パリ エー ショ ン (P28)、 オ フラ イン 時 に も ブラ ウザ 表示 する (P.38) : 037 


H 
M 
L 
リ 
フ 
レ 
ン 
ス 


オフ ライ ン 時 に も ブ ラウ ザ 表 示す る 


HTML5 で は 、 デバ イス が イン ター ネッ トド に つなが っ て いな いと き (オフ ライ ン 時 )、 
ブラ ウザ に 保存 し た ファ イル を 閲覧 する よう に する 機能 が あり ます 。 
この 機能 を 実装 する 3 つの 手順 が あり ます 。 


1. マニ フェ スト ファ イル の 作成 
2. .htaccess ファ イル に MIME タ イプ と 拡張 子 の 関連 付け を 追加 
3. html 要 素 に manifest 属 性 を 設定 


時 マニ フェ スト ファ イル の 作成 

マニ フェ スト ファ イル は 、 オ フラ イン 時 の た め に ブラ ウザ に 保存 する ファ イル 、 オ ン ラ 
イン 時 だ け 読 み 込む ファ イル を リス ト 化 し た テキ スト ファ イル で す 。 拡 張子 は .appcache 
、 が 推 胡 さ れ て いま す が 、.htaccess ファ イル で MIME タ イプ と 関連 付け し て お け ば 、 他 
の 拡張 子 で も 問題 あり ませ ん 。 

以下 が マニ フェ スト ファ イル の 構文 で す 。 


電 
HTML5 新 規 


- CACHE: 
太 


NETWORK: … 更新 し た 日 付 
… ブラ ウザ に 保存 する ファ イル の URL 

… ブラ ウザ に 保存 し な い フ ァイル の URL 
FALLBACK: … オフ ライ ン 時 の 置き 換え 元 の ファ イル の URL 
人 〇 … オフ ライ ン 時 の 置き 換え 先 の ファ イル の URL 


CACHE MANIFEST は 必ず 入れ る 言葉 で す 。 CACHE MANIFEST の 下 に は 、 ブ ラウ 
ザ に 保存 し て オフ ライ ン 時 に も 表示 させ る ファ イル を 書き ます 。 

ブラ ウザ に 保存 し た ファ イル は 、 マ ニ フ ェ スト ファ イル を 更新 し な いか ぎり 更新 され 
せん 。 その た め 、# か ら 始 まる コメ ント 行 に 日 付 を 入れ て お き 、 こ の 日 付 を 更新 する こと 
で 更新 ファ イル を 反映 させ る こと が で きる よう に し て お きま す 。 

CACHE: の 下 は CACHE ANIFEST の 下 と 同じ で 、 ブ ラウ ザ に 保存 し て オフ ライ ン 時 
に も 表示 する ファ イル を 書き ます 。 


NETwWORK: の 下 に は 、 ブ ラウ ザ に 保存 せ ず 、 イ ンタ ーネット に つなが っ た と きだ け 利 
する ファ イル を 書き ます 。 
FALLBACK: の 下 に は オフ ライ ン 時 に 置き 換え る ファ イル を 書き ます 。 
各 フ ァイル の URL は 絶対 パス 、 相 対 パ ス の いずれ で も 書く こと が で きま す 。 
CACHE:、NETWORK:、FALLBACK: の 記述 は 、 マ ニ フ ェ スト ファ イル の 中 で 何 
ます 。 記述 する 順序 も 自由 で す 。 


邊 .htaccess ファ イル に MIME タ イプ と 拡張 子 の 関連 付け を 追加 

マニ フェ スト ファ イル の AMIME タ イプ (text/cache-manifest) と 拡張 子 
(.appcache) を 関連 付け る 必要 が あり ます 。 こ の 関連 付け を する の に .htaccess ファ 
イル を 使用 し ます 。.htaccess ファ イル は 単なる テキ スト ファ イル で す 。 

.htaccess フ ァイル の 内 容 を サイ ト 全 体 に 反映 する と き に は 、 ル ー ト フォ ル ダ 
に ,htaccess フ ァイル を 置き を ます 。 そ し て 以下 の 1 行 を .htaccess ファ イル に 追加 し ま 
す *! (ここ で は 拡張 子 を .appcache と し まし た が 、 特 に 決ま り は あり ませ ん )。 


AddType text/cache-man1fest.appcache 


箇 html 要 素 に manifest 属 性 を 設定 
以下 が HTMIL 文書 に 組み 込む とき に 使 う 構文 で す 。 


| <htmt manifest= り "> 
|  @ 定義 ファ イル (拡張 子 .appcache) の URL 


サン フル ソー ス 且 右 中 マニ フェ スト ファ イル 


く !DOCTYPE htmL> CACHE MANTFEST 
<htmtL tang="]a"' manifest="man1fest.appcache"> # 2012-10-26 
<head> 攻 症 当 </head> 
<body> 1ndex .htmL 
<p> オ フラ イン 時 で も この ファ イル は 見 る こと が で きま す </p> 
</body> FALLBACK: 
</htmt> / /offtuine.htmt 


NETWORK: 


ギ キ 


に 


ご の マニ フェ スト ファ イル で は 、 サ イト 内 の ルー ト フ ォ ル ダ べ へ の アク セス 時 に は 
offline.html を 表示 し 、 他 の ファ イル は すべ て 保存 し な いこ と を 示し て いま す 。 マ ニ フ ェ 
スト ファ イル を 読み 込む HTML ファ イル は 自動 的 に ブラ ウザ に 保存 され ます が 、 マニ フェ 
スト ファ イル に 書い て お く こ と が 推奨 され て いま す 。 


2 の eewe@Oos@ 
ペー ジ タ イ トル を つけ る 


<t1tte> 坦 </t1tte> 
⑯ Web ページ の タイ トル 


H 
NN 
M 
L 
リ 
フ 
ア 
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kE 守 議 メタ テー タ コン テン ツ 内 包 で きる も の 騙 二 区 | 


| 


title 要 素 は 、HTML 文書 の タイ トル や title 要 素 の 内 容 に は 「 ペ ー ジ 固有 の 内 
名 前 を 示し ます 。 容 | サイ ト 名 ] を 記述 する な どの ルー ル を 
title 要 素 の 内 容 は 、 ブ ラウ ザ の 履歴 や 作っ て 、HTML フ ァイル ご と に 別々 の も 
ブッ クマ ー ク 、 検 索 エ ンジ ン で の 検索 結果 の を 使用 する よう に し まし ょ う 。 
ペー ジ な ど 、 様 々 な と ころ で 利用 され ます 。 
同じ 内 容 の title 要素 を いく つも 作っ て し 
まう と 、 上 記 の 場所 で 利用 され た と き に 同 
じ 名 前 が た くさ ん 表示 され て 区 別 が つか な 
く な っ た り 、 リ ンク 先 を 表示 し な いと ペー 
ジ 内 容 が わか ら な か っ た りす る の で 、 情 報 
を 再 利 用 し に くい Web ペ ー ジ に な っ て し 
まい ま 9 o 


<!DOCTYPE htmt> 

<htmt tang="]a リ > 
<head> 

<meta charset=Wutf げ ー8 リ > | 
<titte>s ペ ー ジ に タイ トル を つけ る | HTML5& | 
CSS3 ボ ケッ トリ ファ レン ス </tttte> 


</head> | 
く body> | 
| 
<p>「 盗 聴 物語 』<br> 

制作 年 度 : 1953 年 監督 : 小津 高 二郎 </p> 


</body> | 『 
</htmt> | 盗聴 物 語 』 
| 制作 年 度 : 1953 年 監督 : 小津 高 二郎 
| 
了 和 | 
040 


2.2 


@ 四 @l@0#@ 
文字 エン コー ド 方 式 を 指定 する 


<meta charset=" 電 "> 


人 @ 文字 エン コー ド 方 式 
(utf-8、shift jjS、euc-jp な ど ) 
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meta 要 素 は 、head 要素 内 の 他 の 要素 る た め の 文 字 エ ンコ ー ド 方 式 な の で 、 韓 国 


(title 要素 な ど ) で は 表現 で き な い 、 様 々 語 と 中 国語 は 表示 で きま せん 。 

な 種類 の メタ デー タ を 示し ます 。 な お 、meta 要 素 cCharset 属 性 に 指定 し 
charset 属 性 は 、 ド キュ メン ト の 文 。 た 文字 エン コー ド 方 式 と 、HTML ファ イ 

字 エ ンコ ー ド 方 式 を 指定 する 属性 で す 。 ル を 保存 する と き に 選択 する 文字 エン コー 

HTML5 で は utf-8 が 推奨 され て いま す 。 ド 方 式 が 違う と 、 文 字 化 けし て し まう の で 

utf-8 は 、 英 語 や 日 本 請 だ け で な く 様 々 な 注意 し まし ょ う 。 

外国 語 を 含ん で いる た め 、 例 えば 、 日 本 語 

と 韓国 語 と 中 国語 を 一 緒 に 記述 し て も 、 

字 化け する こと な く ブ ラウ ザ に 表示 され ま 

す 。 

shift_jis や euc-jp は 、 日 本 語 を 表示 す 


Ia 


| <!DOCTYPE html> | 
| <htmt tang="]a"> ] 
| <head> 

<meta charset=Wutf-8!> ] 
<titte> 文 字 エ ンコ ー ド 方 式 を 指定 する </ttLe> 


中 貼 」 
</head> 
く <body> 


| <p> 『 齋 議 な き 戦 い ] <br> | 
| 制作 年 度 : 1973 年 監督 : 浅 作 胡 二 <br> | 
| 語 : BattLes Without The Tnternal 

| Memo<br> 

韓国 語 題 : 財 党 可 豆 鉛 | 定 <br> 英語 : Batlles Without The Internal Memo 
中 国語 題 : 三 斗 没有 内 部 特 忘 舟 </p> | 国 語 題 : 時 QBe0| 時 
前 | | 中 国語 題 : 直 半 没有 内 部 香 祥 


『 課 議 な き 戦 い 』 
制作 年 度 : 1973 年 監督 : 浅 作 胡 二 


\ 
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@eweo# ぁ 
検索 エン ジン 用 に 概要 な ど を 設定 する 


<meta name=" 電 "content=!"! 全 "> 
<meta name="robots" content=!" 還 "> 
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信 description、keywords 
信 … 説明 文 (description の と き )、 キ ー ワ ー ド (keywords の と き ) | 
圏 … oindex、nofollow、 none、noarchive 


メタ デー タ ・ コ ン テ ン ツ 内 包 で きる も の 租 ヨ | 


meta 要 素 は 、VWVeb ペ ー ジ の 説明 文 を ト の 制御 に 利用 で きま す 。 属性 値 に は 下記 
示す 場合 や 、 検 索 エ ンジ ン の 巡回 ロボ ッ ト の も の が あり 、 複 数 の 値 を カン マ 「,」 で 
の 制御 に 利用 で きま す 。 区 切っ て 指定 で きま す 。 
(5 開 隔 RaCUIID 人 中 定 し た - noindex.… 検 索 結果 に 表示 され な いよ 
meta 要 素 は 、VVeb ペ ー ジ の 説明 文 を 示 0 
し ます 。 COntent 属 性 に は 自由 に 記述 で に 9 指定 
ae : nofollow…Web ペ ー ジ 内 の リン ク 先 
0 _ ER を 巡回 させ な いよ うに する 指定 

DI0e 半 人 位 に RSINWOR9 放 定 じ た : none…noindex と nofollow を あわ せ 
meta 要 素 は 、WeD ペ ー ジ の キー ワー ド て ひと つの 言葉 で 示し た 指定 
を 示し ます 。content 属 性 に は 単語 を ・ noarchive…Web ペ ー ジ の キャ ッシュ 
ツマ 開 で 区 切っ て 記述 し ます 。 を させ な いよ うに する 指定 

name 属 性 値 に robots を 指定 し た 
meta 要 素 は 、 検 索 エ ンジ ン の 巡回 ロボ ッ 


了 プ ) | 
く !DOCTYPE html> | 
<htmt tang="]a"> | 
<head> 

< く meta charset=Wutf-8 リ > 

<titte> 検 索 エ ンジ ン 用 に 概要 な ど を 設定 する </ 
t1tLe> 

<meta name='"description'"' content=『 検 索 | 
エン ジン の 制御 を 説明 し て いま す 。"> 

< く meta name="robots"' content="'none 。 
noarch1Vve"> | 


ーーーーーーーーーーーーーー、 


</head> | | 『 と な り の 所 』 
<body> | 制作 年 度 : 1988 年 監督 : 寺崎 謎 


<p> 「 と な り の 所 』<br> 

制作 年 度 : 1988 年 監督 : 寺崎 駿 </p> 
</body> 

</htmt> | | 
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スマ ー ト フォ ン の 表示 を 設定 する 


価 … 幅 や 高 さ な どの 指定 


メタ デー タ ・ コ ン テ ン ツ 


<meta name="'viewport" content=" 坦 "> 


し esc で sto 
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name 属 性 値 に viewport を 指定 し た 
meta 要 素 は 、 ス マー ト フ ォ ン や タブ レッ 
ト 端 末 の デフ ォ ル ト 表 示 、 ユ ー ザ ー に よる 
拡大 / 縮小 操作 の 制御 な ど を 示し ます 。 


content 属 性 に は 下記 の プロ パテ ィ を 指 
定 で きま す 。 複 数 の プロ パテ ィ を 記述 する 
と き は 「,」 で 区 切り ます 。 


・ width… 表 示 幅 。 980px な ど 。 デ バイ 
ス の ピク セル 幅 を 示す device-width 
を 指定 可能 . 

。 height… 表 示 疑 幅 。 デバ イス の ビク セル 
縦 幅 を 示す device-height を 指定 可能 


: initia-scale… 初 期 表 示 倍 率 。 1.0 な ど 

s minimum-scale… 最 小 表 示 億 率 。 
0.25 な ど 

s maximum-scale… 最 大 表示 倍率 。 
5.0 な ど 

* user-scalable… ユ ー ザ ー が 拡大 / 縮 小 
で きる か どう か 。yes、no を 指定 


Web ペ ー ジ の ペー ジ 幅 を 100% に 設定 
し た と き に は width=device-width、 具 
体 的 な 数 値 を 設定 し た と き に は width= 
1699px な ど と 指定 すれ ば OK で す 。 


< く !DOCTYPE htmL> 
<htmt tang="]a"> 
< く head> 


<meta charset=Wutf-8> 

<titLe> ス マー ト フ ォ ン の 表示 を 設定 する </titte> 
| <meta_name="'viewpor て !" content="! 
width=device-width,nit1at-scaLe=1 .0 。 
user-scatabte=no リ > 


</head> 
| <body> 


旧 中 申 」 
<p> 『 月 は 丁稚 に 出 て いる 」 <br> 
制作 年 度 : 1993 年 監督 : 金 洋 一 </p> 
く /body> 
| </html> 


給 


『 月 は 丁稚 に 出 て いる 』 
制作 年 度 : 1993 年 監督 : 金 洋一 
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革 


」 1 22 
|⑥|@|⑨| 0 | 


Column 


p 号 や マー ク を 表示 する 


「< く | や 「」 と いう 記号 を 文章 内 に 使い た いと き 、「&l:] や 「&gt:」 と いう 特殊 な 記 
述 を し な けれ ば ブラ ウザ に は 表示 され ませ ん 。 

これ は 「<] や 「>」 が タグ を 示す の に 使わ れる 文字 だ か ら で す 。 

文字 参照 は b、 この よう に 「 意 味 が め ある た め に ブラ ウザ に 表示 され な い 文 字 | を 表示 する 
だ た め の 特殊 な 記述 で す 。 

字 参 照 に は 、 記 述 方 法 の 違い い に よ つて 文字 実体 参照 と 数 値 文 字 参照 が あります 。 
実体 参照 は 、 上 述 の 「&lk」 [&gt] の よう に アル ファ ベッ ト の 駐 字 列 を 「&」 と 
で は さん だ 記述 で す 。 

数 値 文 字 参 照 は 、「8#60:」 「&#62:] の よう に 数 値 を 「&#| と 「:] で は さん だ 記述 で す 。 
一 般 的 に 、 文 字 実 体 参照 の ほう は 意味 が あっ て わか りや すく な っ て いま す 。 例え ば 
「<(&lt)] で あれ ば 「t」 が [less than ( 小 な り )」 を 示し て いま す 。 


表示 実体 参照 数 値 参照 説明 

&tt: &#60: 小 な り 記号 

&gt: &#62: 大 な り 記 号 

&amDp: &#38: アン パー サン ド 
&quot: &#34: 引用 符 

&tsquo: &#8216: 引用 符 (始ま り ) 
&rsquoj &#8217: 引用 符 (終わ り ) 
&Ldquoj &#8220, 二 重 引 用 符 (始ま り ) 
&rdquoj &#8221 二 重 引用 符 (終わ り ) 
&laquoj 171: 二 重 山 括弧 (始ま り ) 
&raquo: 187: 二 重 山 括弧 (終わ り ) 
&cent: &#162: ント 記号 

&pound: &#163: ポン ド 記 号 

&euroj &#8364: ユー ロ 記 号 

&yenj &#165: 円 記号 

&copy: &#169: 著作 権 マ ー ク 
&reg &H174: 商標 登録 マー ク 
&deg: &#176: 度 

&mdashi &#8212: em ダッ シュ 
&ndash: &#8211: en ダッ シュ 
&pLusmni 。 &#177: プラ スマ イナ ス 
&spades: &#9824: スペ ー ド 

&cLubs: &#9827: クロ ー デ バー 
&hearts: &#9829: の ーー ド 

&diams: &#9830: と ち 公 


る る | まゆ | 時 


Column 


ブラ ウザ で は 見 えな い コ メン ト を 入れ る 


HTML ファ イル を 読み や すく する た め に 、 情 報 を 茅 し て お きた いと き に は コ 
ー ク アッ プ を 使用 し ます 。 


<!-- 但 --> 


コメ ント の マー クア ッ プ は 開始 文字 「<!--] か ら 始 まり 、 終 了 文 字 「-->」 で 終わ り ま 
す 。 コ メン ト の 開始 文字 と 終了 文字 の 間 ( 借 ) に 記述 べ れ た テキ スト は 、 ブ ラウ ザ に は 表 
示さ れ ま せん 。 また 、 複 数 行 に な つて も 問題 あり ませ ん 。 
コメ ント の 開始 文字 や 終了 文字 に 重複 し に し まう の で 、 コ メン ト の テキ スト で は 、 以 下 
の こと を し て は いけ な いと いう ルー ル が あり ます 。 


「>」「->」 か ら 始 め る 
・「--」 を 含む 
: 「-」 で 終わ ら せ る 


の 2 

」 <!DOCTYPE htmt> 

<htmt tang="]a リ > 

<head>E 品 に /head> 

| <body> 

|.<!- こ | 記事 スタ ー ド ニュ > 

| <arttcLe> 
| <h1> コ メン ト を 使う 例 </h1> 
く <section 1d="sec_91"> 
<h2> セ クシ ョ ン 1</h2> 
<p> コ メン ト が ある こと で セク ショ ン 1 の 範囲 が わか りや すく な り ま す 。</p> 
<!-ー /sec_91 --></section> 
<secton 1d=Wsec_02"> 
<h2> セ クシ ョ ン 2</h2> 
| <p> コ メン ト が ある こと で セク ショ ン 2 の 範囲 が わか りや すく な り ま す 。 </p> 
く !-ー /sec_92 --></sect1on> 
」 </art1ctLe> 
ST 7 記事 下 多 NR > 
</body> 
</htm1> 


@ ら eeeo$@ 
見 出し を 作る 


、・。 <h 人 > 人 </h 信 > 
靖 @-1-6 
4 …… 見 出し と な る テキ スト 
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條 E 草 フロ ー コン テン ツ 、 ヘッ ディ ング コン テン ツ 幼 玉 EE お湯 フレ ー ジ ング ・ コ ン テ ン ツ 


h1h6 要 素 は 、 セ クシ ョ ン ご と の 見 出 _ ト に h2 要 素 を 指定 し て いま す 。 その た め 、 
し を 示し ます 。 h の 右側 の 数 字 は 見 出し の ブラ ウザ 上 で は 文字 が 太字 で 大 きく 表示 さ 
ラン タタ で す 。 _ れ て いる こと が わか り ま す 。 

h1 要素 が 最も 上 の ラン ク の 見 出し 、h6 
要素 が 最も 下 の ラ ンク の 見 出し と な り ま 
す 。 
見 出し の ラン ク は 、 ツ リー 構造 を 示す 
よう に 記述 する 必要 が あり ます 。 例え ば 、 
h1 要素 の すぐ 後に h3 要 素 を 記述 する の は 
適切 な 使い 方 で は あり ませ ん 。 
[セー ラー 服 と ミカ ン 十 ] と いう テキ ス 
ト に h1 要素 、「 あ ら す じ 」 と いう テキ ス 


0 較 議 プラ ウサ 表示 
<!DOCTYPE html> 
<htmt tang="]a リ > ーー」 
ene セー ラー 服 と 。 
<meta charset=Wutf-8!> 人 Le ae 
| <titue> 見 出し を 作る く /title> ミカ カッ ミ ャ ン キ 
E 抽 3 | 
Wi 制作 年 度 : 1981 征 
EE 監督 : 相 厩 慎二 
8 服 | 
<h1> セ ー ラ ー 服 と ミカ ン 十 </h1> ya 
<p> 制 作 年 度 : 1981 年 <br> 監 督 : 相 麦 慎 二 </p> | あら すじ 幸 
<h2> あ ら す じ </h2> _ 
<p> セ ー ラ ー 服 と ミカ ン 10 個 を めぐ る ファ ンタ セー ラー 服 と ミカ ン 10 個 を め 
ジッ ク 青 春 ス トー リー。</p> ぐる ファ ンタ ジッ ク 青 春 ス トー リー。 
</body> 
く /htmt> | 
| 
上 


046 ら セク ショ ン (P.22) 
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H 

汎用 的 に 使え る 要素 ① 

| フラ 

| <div> 価 </div> レ 

@ フロ ー・ コ ン テ ン ツ ス 
CEED5 フロ ー・ コ ン テ ン ッ フロ ー ・ コ ン テ ン ツ 


div 要 素 は 、 特 に 特別 な 意味 を 持っ て い に 合わ せ て セク ショ ニン グ ・ コ ン テ ン ツ 
ませ ん 。 そ の た め 、div 要 素 は な る べく 使 (article、aside、section、nav) を 選 
わ ず 、 他 の 適切 な 要素 か ら 利 用 する こと が ぷ ぶ こ と を 最初 に 検討 し ます 。 
推奨 され て いま す 。 複数 の 要素 を グル ー プ その 後 、 例 えば 2 段 組 みや 3 段 組み を す 
化す る た め に class、lang、title 属 性 な る な ど 、 レ イア ウト の た め に 必要 と な る グ 
ど と 一 緒 に 使う こと が で きま す 。 ルー プ 化 で は div 要 素 の 利用 を 考え る よう 

div 要 素 は 様々 な 要素 を グル ー プ 化 で き に し まし ょ よう 。 
ます が 、 グ ルー プ 化 する 内 容 が 独立 し た 記 
事 な ら article 要 素 が 適切 で すし 、 主 だ っ 
た リン ク の 集まり な ら nav 要 素 が 適切 で 
す 。 

この よう に 要素 の グル ー プ 化 で は 、 内 容 


く !DOCTYPE htmt> 

<htmt tang=! け a"> 

<head> 

<meta charset=Wutf-8 リ > 

<titte> 汎 用 的 に 使え る 要素 (1)</titLe> 


</head> 

<body> 6 

<div> 「 ハ ゼ 立 ちぬ | <br> 

| 制作 年 度 : 2913 年 監督 : 寺崎 駿 </div> 
| </body> 

| </htmt> 


いで 立 も ト <3 
| 
] 
] 
] 
| 


『 ハ ゼ 立 ちぬ 』 
制作 年 度 : 2013 年 監督 : 寺崎 駿 
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汎用 的 に 使え る 要素 ② 
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<span> 坦 </span> | 
し 2 お ジジ バジ 


| 2E 誠 0 蘭 フロ ー コン テン ツ 、 フレ ー ジ ング コン テン ツ 寺 E ま 33 導 但 フレ ー ジ ング ・ コ ン テ ン ツ 
し 和 


Span 要素 は 、 特 に 特別 な 意味 は 持っ て ン テ ン ツ を 利用 し まし ょ う 。 
いま せん 。 し か し 、class、Iang、dir 属 その どれ に も 当て は ま ら な い 場 合 ( 
性 な どの グロ ー バ ル 属 性 を 使用 する 際 に 便 "span 要 素 の 利用 を 考え る よう に し まし ょ 
利 で す 。 5。 

span 要素 は 、 単 語 や 文章 な ど 様 々 な 部 
分 に 利用 で きま す が 、 重 要 な 部 分 で め れ ば 


strong 要 素 、 強 調 す る 部 分 で あれ ば em 
要素 、 ユ ー ザ ー に 注意 を 促す 文章 な ど は 
Small 要素 が 適切 で す 。 

この よう に 単語 や 文章 な ど に は 、 内 容 に 
合わ せ て strong 要 素 、em 要 素 、small 
要素 な ど 、 意 味 を 持っ た フレ ー ジ ング ・ コ 


く !DOCTYPE htmt> 

| <htmt tang="a"> 

<head> 

<meta charset=!!utf-8!> 
<titte> 汎 用 的 に 使え る 要素 (2)</t1tLe> 


</head> 
< く body> 


<p>「 そ し て 父 に 樽 』 <br> 
| 制作 年 度 : <span ctass="data">2913 年 </ 


| span> 監督 : <span ctass=Vdata"> 非 枝 答 | 『 そ し て 父 に だ 様 』 
| 間 | 制作 年 度 : 2013 年 監督: 非 枝 裕和 
Ody 
JNN | 
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@ の @@@0 車 @ 
まとまり を 記事 と し て 表す 


| <articte> 価 </articte> 旧 
介 … 自己 完結 する 内 容 の 記事 の 見 出し や 文章 な ど 
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人 E 語 固 往 フロ ー コン テン ツ 、 セク ショ ニン グ コンテンツ 馬 ER ま は 瘍 フロ ー コン テン ッ ツ 


Ni 8 4 


article 要 素 は 、 自 己 完結 する 内 容 を 表 ぶた つ あ り 、 同 じ 階 層 に ある 見 出し の よう 
す セ クシ ョ ン を 定義 し ます 。 例 えば 、 雑 に 思え ます 。 し か し 、h1 要素 の ラン ク と 
誌 や 新聞 の 記事 、 掲 示 板 へ の 投稿 、 ブ プロ は 関係 な く 階 層 構 造 は セク ショ ン で 作ら れ 
グエン トリ ー、 ユ ー ザ ー の 投稿 し た コメ ン てい ます 。 

ト 、 イ ンタ ラク ティ ブ な ウィ ジェ ッ ト や ガ 
ジェ ッ ト に 指定 し ます 。 

サン プル で は 、「 吾 募 は 猫 で ある 」 と い 
う テ キス ト の h1 要素 と 画像 と p 要 素 を 囲 
う 要 素 と し て article 要 素 を 指定 し て いま 
す 。 その た め 、body 要素 の 作る セク ショ 
ン と article 要 素 の セク ショ ン で 階層 構造 
が 作ら れ ま す 。 こ の ペー ジ に は h1 要素 が 


サン ブル ソー ス 
<!DOCTYPE htmt> 激 作 ci 集 
<htmt tang="]a><head> 

<meta charset= リ "utf-8!!> 夏 目 石 HH 
<titte> ま と まり を 記事 と し て 表す </tttte> 
E 肖 /head> 吾 墓 は 描 で ある 
<body> M 
<h1> 夏 目 激 石 作品 集 </h1> に し か し ひも じい の と 寒 
<articLe> l 1 | か い の に は どう し て も 我 
はず ある </Nns まう か せい 人 が 出来 ん 。 吾 生 は 再 


<p> し か し ひも じい の と 寒い の に は どう し て も 我慢 に 
が 出来 ん 。 理 七 は 再び お さん の 隙 を 見 て 台所 へ 還 a 


な くま た 
い 上 あがっ た 。 3</po PP ーー 


< く /art1cLe> 

</body> : 5 出さ れ て は 四 い 上 り 、 

</htmt> 3 司 い 上 っ て は 投げ 出さ れ 、 何 で も 同じ 事 を 四 五 遍 繰 り 
返し た の を 記憶 し て いる 。 そ の 時 に お さん と 云う 者 は 


つく づく いや に な っ た 。 


\ 
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ら @@@0$ 9 


まとまり を テー マ の 区 切り と し て 表す 


。 <secton> 電 < く / secton> 


、HTML5 新規 


テー マ で まとまっ て いる 内 容 の 見 出し や 文章 な ど 


E 計 琴 隊 ロー. コンテンツ 、 セク ショ ニン グ ・ コ ン テ ン ツ EE 人 泊 フロ ー コン テン ツ 


section 要 素 は 、HTML 文 書 や アプ リ 
ケー ショ ン の 汎用 的 な セク ショ ン を 定義 し 
ま 弥 。 ご ご 罰 言 ジ セク ジョ ツン ど は 、 ヨ ウデ“ 
ン ツ 内 に お いて テー マ で まとめ られ た 部 
分 を 指し ます 。 こ の た め 、section 要 素 は 
div 要 素 の よう に 単に まとめ る だ け の 要素 
で は あり ませ ん 。 
スタ イル シー ト の 適用 や め 、 ス クリ プ ト の 
利用 時 の 利便 性 の た め に 要素 を 追加 する 場 
合 は 、div 要 素 が 適切 で す 。 
サン プル で は 、「 一 」 と いう テキ スト の 
h1 要素 と 画像 と p 要 素 を 囲う 要素 と し て 


section 要 素 を 指定 し て いま す 。 そ の た め 、 
body 要素 の 作る セク ショ ン と section 要 
素 の セク ショ ン で 階層 構造 が 作ら れ ま す 。 
この ペー ジ に は h1 要素 が ふた つ あ り 、 
じ 階 層 に ある 見 出し の よう に 思え ます 。 し 
か し 、h1 要素 の ラン ク と は 関係 な く 階 層 
構造 は セク ショ ン で 作ら れ て いま す 。 


可 


サジ ワル ソス 
<!DOCTYPE html> 


<htmt tang="]a"><head> 
<meta charset=Wutf-8"> 


EE 沿 k/head> 


<titUe> ま と まり を テー マ の 区 切り と し て 表す </titLe> 


DE 間 間 
吾 募 は 導 で ある 


<body> 
<h1> 吾 募 は 猫 で ある </h1> 
<sect1on> 
<h1> 一 </h1> 


中 施 

<p> し か し 挨拶 を し な いと 険 呑 だ と 思っ た か ら [吾輩 は 
猫 で ある 。 名 前 は まだ な い ] 者 
冷 然 と 答え た 。 Ep> 1 

</secton> 
</body> 
</html> 


な め を た 
い 人 たせ すず! 


だ 」 黄 分 傍 知 無人 で ある 。 


気 を 装っ て 冷 然 と 答え た 。 し か 


「 何 、 猫 だ ? 猫 が 聞い て あき れ ら あ 。 全て えど こ に 住ん で る ん 
「 吾 答 は と この 教師 の 家 に いる の だ 」 

「 ど う せ そん な 事 だ ろう と 悪 っ た 。 い や に 靖 せ て る じゃ ね え か 」 
と 大 王 だ け に 気 贅 を 吹き か ける 。 


し か し 挨拶 を し な いと 険 奉 だ と 
思っ た か ら 「 吾 監 は 郊 で ある 。 
名 前 は まだ な い 」 と な る べく 平 


し この 符 吾 募 の 心 衣 は た し か に 
平時 より も 烈 し く 豆 動 し て お っ 
た 。 彼 は 大 に 軽 蔵 せる 調子 で 


050 


: 関連 
1 * ク ョ ン P2 の 


@@@@ ら 0 る 
まとまり を 補足 部 分 と し て 表す 


4 <as1de> 坦 </as1de> 
| |  @ 主題 を 補足 する 内 容 の 見 出し や 文章 な ど 


HTML5 新 規 


6EE 間 フロー コン テン ツ 、 セ クシ ョ ニン グ ・ コ ン テ ン ツ まま 3 湯 フロ ー コン テン ツ 


aside 要 素 は 、VWVeDb ペ ー ジ の 主題 に 関 素 を 囲う 要素 と し て aside 要 素 を 指定 し 
連 し た 内 容 か ら な る セク ショ ン を 定義 し ま て いま す 。 そ の た め 、 こ の aside 要 素 は 
す 。aside 要素 内 に 入る 内 容 は 、 主 題 と は 直前 の p 要 素 の 補足 部 分 と な っ て いる こと 
別 の 内 容 と な る で し ょ う 。 この セク ショ ン が 分 か り ま す 。 

に 定義 せる の は 、 例 えば 印刷 物 で 言え ば 、 
補足 記事 の よう な 内 容 で す 。 

た だ aside 要 素 は 、HTML 文書 内 の 主 
だ っ た 内 容 の 一 部 と いう 位置 づけ に な る た 
め 、 単 な る 挿入 句 に 利用 する の は 適切 で は 
あり ませ ん 。 

け ン プル で は 、 画 像 の すぐ 下 に ある 「 勝 
手 ] の 用 語 説 明 を し て いる h1 要素 と p 要 


ブラ ウザ 表示 
<!DOCTYPE html> 
<htmL tang="a"><head> 吾 墓 は 親 で ある 
<meta charset= リ utf-8 リ > 
<titte> ま と まり を 補足 部 分 と し て 表す </t1tte> 脇 手 か ら 御 三 が 客 さま の 御 謎 が 佐 り まし た 。_。、 
EiH</head> と 、 二 個 の 焦 蕎 麦 を 座敷 へ 持っ て 来る 。 も うー 本 
<body> 「 奥 さん これ が 僕 の 自 弁 ん の 御馳走 で す よ 。 
人 ちょ っ と 御免 貢 っ て 、 こ と で ば ぱく つく 事 に 至 

HI し ます か ら 」 と 困 に 御 辞 儀 を する 。 真面目 

2 月 還 

<p> 勝 手 か ら 御 三 が 御 客 さ ま の 御 読 が 参り まし た な よう な 硬 酸 た よう な 動作 だ か ら 細 君 も 応 
と 、 7p> 対 に 称し た と 見 えて 「 さ あど う ぞ 」 と 再 く 返 
<as1de> 事 を し た ぎり 拝見 し て いる 。 主 人 は よう や く 
<h1> 勝 手 </h1> 写真 か ら 眼 を 放し て 「 君 この 署 い の に 若 麦 は 
<p> 台 所 の こと 。</p> 毒 だ ぜ 」 と 云っ た 。 「 な あ に 大 丈夫 、 好 き な も の は 滅多 に 中 る も 
</as1de> ん じゃ な い 」 と 蒸 能 の 斗 を と る 。 
</body> 勝手 
</htmt> 
MI ( 

1 台所 の こと 。 
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@ ら @ee@O#@ 


まとまり を 主 な リン ク の 集まり と し て 表す 


| <nav> 坦 </nav> 


@ リン グ 集 の 内 容 を 示す 見 出し や リン ク の リス ト な ど 


EE 国生 フロ ー コン テン ツ 、 セク ショ ニン グ ・ コ ン テ ン ツ 幼生 3 伯 フロ ー コン テン ツ 


nav 要 素 は 、Web サ イト 内 の 主 な ナビ 
ゲー ショ ン を 表す セク ショ ン を 定義 し ま 
す 。 

すべ て の リン ク の 集まり に nav 要 素 が 
必要 と な る わけ で は あり ませ ん 。 メ イン の 
リン ク 集 に 適用 し まし ょ う 。 

ペー ジ の 最 下 部 に は 、 利 用 規約 や 個人 情 
報 保護 方 針 な ど 、 様 々 な ペー ジ へ の 小さ な 
リン ク 集 が あめ る こと が 多い で す が 、 こ うし 
た リン ク 集 は footer 要 素 で 十分 で す 。 
サン プル で は 、 ペ ー ジ 内 の 見 出し へ の リ 


ンク の 集まり で ある ul 要素 を 囲う 要素 と 
サ ツ プ ルソー ス 


<!DOCTYPE htmtl> 

<htmt tang="a"><head> 

< く meta charset=Wutf-8!> 

<tjtte> ま と まり を 主 な リン ク の 集まり と し て 表 
す </titte> 

に 測 : 衣 /head><body> 

<h1> 和 吾輩 は 鑑 で ある < 人 

< く nav><ut> 

中 申 

<Uui><a href=!#anc_95!> 五 </a></11> 
</u1t></nav> 

中 曲 」 

< く sect1on> 

<h1 1d="'anc_95!> 五 </h1> 


し て nav 要 素 を 指定 し て いま す 。 そ の た め 、 
nav 要 素 は この ペー ジ の 主 な リン ク の 集 ま 
- り と な っ て いる こと が 分 か り ま す 。 


ブラ ウザ 表示 
吾 募 は 摘 で ある 
ペー ジ 内 リン ク 


ャ ニ w ニ 三 * 四 五 


呈 四 則 


違 ブラ ウザ 表示 
例 に よっ て 人 金田 邸 へ 忍び 込む 。… 


五 


た ち ま ち 和 蘭子 の 機 の 三 つ 目 が 雨 に 濡 


(用 多 4 


れ た よう に 真中 だ け 色 が 変る 。 それ 
を 透かし て 薄 紅 な も の が だ ん だ ん 濃 
く 写っ た と 皿 う と 、 抵 は いつ か 破れ 
て 、 赤 い 舌 が べろ り と 見 えた 。 舌 は 
し ば し の 間 に い 中 に 消え る 。 入 れ 
代 っ て 何だ か 恐 し く 光 る も の が 一 

つ 、 破 れ た 孔 の 向 側 に あら われ る 。 2 
右 い も な く 答 士 の 上 孔 で ある 。 紗 な 事 


2 


EE 当 1 | に は その 眠 が 、 部 屋 の 中 に ある 何 物 1 
< く /sect1on> 1 ] を も 見 な いで 、 た だ 柳 行 季 の 後に 起 れ て いた 吾 医 の み を 見 つめ || 
</body> | て いる よう に 感 ぜ られ た 。 一 分 に も 足ら ぬ 生 で は あっ た が 、 こ と | 
</htmt> う 説 まれ て は 寿命 が 縮まる と 忠 っ た くら いで ある 。 | 
: 関連 
052 : @⑥ クシ ョ ン P22) 


生還 『 : 滞 時 ーー ニー ーー ニー ーー ーー ーー ンー ーー っ ツー ーーー ーー ーー 
2.2 1 


@G@@@0 す る 


まとまり の 最初 の 部 分 を 表す 


| <header> 電 </header> 
介 まとまり の 最初 の 部 分 
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フロ ー・ コ ン テ ン ツ EK ま 計 3 但 フロ ー・ コ ン テ ン ツ (header 要素 、footer 要素 を 子孫 に 含め な い ) 


header 要素 は 、 セ クシ ョ ン 内 の ヘッ その た め 、 こ の header 要素 は body 要 素 
ダー を 定義 し ます 。 た いて い h1 一 h6 要 の 作る セク ショ ン の ヘッ ダー と な る こと が 
素 の セク ショ ン の 見 出し を 含み ます が 、 必 わかり ま す 。 

須 で ご は あ り ま せん 。 

セク ショ ン の 目次 や 検索 フォ ー ム 、 ロゴ 
を 囲 の の に も 利用 で きま す 。 

header 要素 は セク ショ ニン グ ・ コ ン テ 
ン ツ で は な いた め 、 新 し い セ クシ ョ ン を 作 
り ま せん 。 

サン プル で は 、body 要 素 の 開始 タグ の 
すぐ そば に ある h1 要素 と p 要 素 を 囲う 要 
素 と し て header 要 素 を 指定 し て いま す 。 


ツウ ルツ キス | ブラ ウザ 表示 

く !DOCTYPE htmtl> 

<htmt tang="a"> 

<head> 培 了 吾 団 は 猫 で ある 

<meta charset=!utf-8 リ > 

<titte> ま と まり の 最初 の 部 分 を 表す </titLe> 夏目 激 石 

Ei:/head> 

<body> ae た だ ヴァ イオ リン が 弾き た い ば 

<header> 1 | まお ポー ン か り で 胸 が 一 杯 に な っ て る ん だ 

<h1> 吾 輩 は 猫 で ある </h1> か ら 妙 な も の さ 。 こ の 大 平 と 去 

<p> 夏 目 激 石 </p> う 所 は 府 申 山 の 南 側 で 天気 の い 

</header> い 日 に 登っ て 見 る と 赤松 の 間 か 

ら 城 下 が 一 目 に 見 下る せる 眺望 

<p> た だ ヴァ イオ リン が 弾き た い ば か り で 胸 が 一 佳 総 の 平地 で ーー そう さ 広 さ は 

杯 に な っ て る ん だ か ら 紗 な も の さ 。 攻守 : 衣 /p> まあ 百 坪 も ある うか ね 、 真 中 に 

人 八 敷 ほど な 一 枚 岩 が あっ て 、 
北側 は 鵜 の 沼 と 云う 池 つ づき 

で 、 池 の まわ り は 三 抱 えも ある うと 云う 樽 ば か り だ 。 
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KKKUEL) 


文 <footer> 坦 </footer> 
但 … まとまり の 最後 の 部 分 


フロ ー コンテンツ 四葉 3 瘍 フロ ー コンテンツ (header 要素 、footer 要素 を 子孫 に 含め な い ) 


まとまり の 最後 の 部 分 を 表す 


footer 要素 は 、 セ クシ ョ ン 内 の フッ ター 
を 定義 し ます 。 この 部 分 に は 一 般 的 に その 
セク ショ ン の 筆者 、 関 連 ド キュ メン ト へ の 
リン ク 、 コ ピー ライ ト な どの 湖 報 を 含み ま 
po 

著者 へ の 問い 合わ せ 情 報 は 、footer 要 
素 内 の address 要 素 に 記載 する の が よい 
だ Sep 

footer 要素 は た いて い セ クシ ョ ン の 最 
後に 配置 し ます が 、 必 ず し も そう する 必要 
よ あ り ま せん 。 例え ば 、 セ クシ ョ ン の 最後 
こ 配 置 さ れ て いる 「 一 覧 へ 戻る ] と いう リ 


サシ ツブ ルソー エス | 
<!DOCTYPE htmL> 
<htmt tang=! け a"><head> 
<meta charset=Wutf-8 リ "> 
<titue> ま と まり の 最後 の 部 分 を 表す </titLe> 
半 /head> 
< く body> 
<h1> 吾 募 は 猫 で ある </h1> 
<footer><a href="../"> 一 覧 へ 戻る </a></ 
footer> 
<p> 同 時 に 主人 が いよ いよ 出馬 し て 敵 と 交戦 する 
な 面白 いわ いと 、 痛 い の を 我慢 し て 、 後 を 慕っ で 
裏口 へ 出 た 。 世 衣 7p> 
<footer><a href="、./"> 一 覧 へ 戻る </a></ 
footer> 
く </body> 
</htmt> 


ンク が セク ショ ン の 最初 に も ある 場合 は 、 
どちら も footer 要素 で 囲 の こと が で きま 
ほ 。 

footer 要 素 は セク ショ ニン グ ・ コ ン テ 


ン ツ で は な いた め 、 新 し い セ クシ ョ ン を 人 1 
り ま せん 。 


ブラ ウザ 表示 
吾 意 は 猫 で ある 
や 3 在 S 同時 に 主人 が いよ いよ 出馬 し て 


や り 人 か えす と 交戦 する な 面白 いわ いと 、 閣 い 
俸 妨 いた:! の を 我慢 し て 、 後 を 慕っ て 裏口 へ 
出 た 。 同 時 に 主人 が ぬ す っ と うと 
怒鳴 る 声 が 聞え る 、 見 る と 制 柚 を 
つけ た 十 八 九 に な る 畠 強 な 奴 が 一 
人 、 四 ツ 目 垣 を 向う へ 乗り 越え つ 
つ あ る 。 


一 覧 へ 戻る 


関連 
054 : @ ション (P22) 


@@e@0#@ 


1 


セク ショ ン の 連絡 先 を 入れ る 


構 


<address> 二 </address> 
借 連絡 先 


フロ ー・ コ ン テ ン ツ (ヘッ ティ ング ・ コ ン テ ン ツ 、 セ クシ ョ ニン グ ・ コ ン 
テン ツ 、header 要素 、footer 要素 、address 要素 を 子孫 に 含め な い ) 


HTML5 更新 


address 要 素 は 


、 最 も 近い 祖先 の 


article 要 素 や body 要 素 の 連絡 先 を 示し 


ます 。 
基本 的 に addres 


s 要 素 内 は 、 メ ー ル ア 


ドレ ス や 、 連 絡 先 に 記載 され て いる ペー ジ 
へ の リン ク を 記述 し ます 。 


その た め 、 郵 便 用 


の 住所 な ど 、 任 意 の ア 


ドレ ス を 表す た め に 使用 する こと は で きま 
せん (実際 に 関連 する 連絡 先 で ある 場合 を 


除き ます )。 一般 的 


こ 、 郵 便 用 の 住所 は p 


要素 で マー クア ッ プ する の が 適切 で す 。 
また 、address 要 素 内 に は 連絡 先 以外 


」 サ ツブ プル ソー ス 


<!DOCTYPE htmt> 


革 下 に /head> 


<body> 


く footer> 
く address> 
お 問い 合わ せ : 


com' ら 編集 部 </a> 
く /address> 

< く /footer> 
</body> 

く </htmt> 


<htmt tang="]a"><head> 
< く meta charset="utf-8 リ "> 
<titLe> セ クシ ョ ン の 連絡 先 を 入れ る </itLe> 


<h1> 吾 募 は 猫 で ある </hu>E 講 当 
<p> 「 あ すこ の 娘 が ハイ カラ で 生意気 だ か ら 徳 書 
を 送っ た ん で す 。 E 語 : 衣 /p> 


<a href=ma1ttoreditor1aLeexampte. 


の | 居 報 を 含ん で は いけ ませ ん 。 

連絡 先 と 一 緒 に 記載 する よう な 情報 は 、 
footer 要 素 の 中 に address 要 素 と 一 緒 に 
記載 され る の が 一 般 的 で す 。 


吾 募 は 猫 で ある 


「 あ すこ の 娘 が ハイ カラ で 生意気 だ 
か ら 答 書 を 送っ た ん で す 。 一 一 浜田 
が 名 前 が な くち ゃ いけ な いっ て 云い 
ます か ら 、 君 の 名 前 を か けっ て 云っ 
た ら 、 個 の じゃ つま ら な い 。 古井 武 
右 衛門 の 方 が いい っ て 一 一 それ で 、 
と うと う 個 の 名 を 借 し て し まっ た ん 
で す 」 

「 で 、 君 は あす この 女 を 知っ て る の 


和 は コレ で 
人 を 入 そ や ぬ を し 


か 。 交 際 で も ある の か 」 
お 盛 い 合わ せ : 胡 華 部 
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日 
L 
M 
L 
リ 
フ 
アデ 
レ 
ン 
ス 


-@lweo#8 
ペー ジ の 主 な 内 容 を 示す 


| <main> 信 </main> 


| 
M 
上 
リ 
フ 
ア 
レ 
ン 
ス 


フロ ー・ コ ン テ ン ツ EE 人 訪 フロ ー・ コンテンツ 


main 要 素 は 、 ペ ー ジ の 主 な 内 容 を 示し 要素 の 中 に は main 要 素 を 置く こと は 
ます 。 主 な 内 容 と は 、 ペ ー ジ 内 で 固有 の 内 で きま せん (main 要 素 内 に article/ 
容 を 含ん で いる 部 分 で す 。 その た め 、 ヘ ッ aside/footer/header/nav 要 素 を 置 
ダ ・ フ ッ タ や その 他 の 共通 部 分 は 、main く こ と は 可能 )。 
要素 の 中 に 入ら な いこ と に な り ま す 。 

セク ショ ニン グ ・ コ ン テ ン ツ で は な し の 
で 、 ア ウト ライ ン に は 影響 を 与え ませ ん 。 

main 要 素 を 利用 する 際 は 、 下 記 の こと 
に 注意 し まし ょ よう 。 


: ペー ジ 内 に ひと つ だ け 利 用 可能 で す 。 
*・ article/aside/footer/header/nav 


MA 
<!DOCTYPE html> ペ み の 
<htmL tang="]a"> ナビ ゲー ショ ン | 
<head> | 
< く meta charset=Wutf-8 リ > 妄 | 
<t1tte> ペ ー ジ の 主 な 内 容 を 示す </t1tLe> 吾輩 は 括 で ある | 
EL 衣 /head> 我 に 帰っ た と き は 水 の 上 に 浮い て いる 。 苦 上 
<body> し いか ら 爪 で も っ て 矢 舞 に 拉 い た が 、 手 け n4uuFE ぜ 3 あ ? 
<header 1d="header"> ヘ ッ ダ </header> る も の は 水 ば か り で 、 揺 く と すぐ も ぐっ て 
<nav id="nav"> ナ ビ ゲ ー シ ョ ン </nav> し まう 。 仕 方 が な いか ら 後 足 で 科 ド 上 っ て 
<main> お いて 、 前 足 で 搬 い た ら 、 が りり と 音 が し 
<h1> 吾 募 は 猫 で ある </h1> て わずか に 手 応 が あっ た 。 よ う や く 頭 だ け 
| 淫 く か ら ど と だ ろう と 見 わ す と 、 理工 は 
<p> 我 に 帰っ た と き は 水 の 上 に 浮い て いる 。 </p> 半生 欠 5iEKSs 
く /ma1n> H フッ タ 
<footer id="footer> フ ッ タ </footer> | 
</body> 四 | 
く /htmt> 
\ 


Column 


HTML5 と 関連 技術 の 進化 


箇 VVeb ア プリ ケー ショ ン の た め の HTML5 


HTML4 と XHTML1 まで は 


ー ク アッ プ だ け の 仕様 で し た 。 HTML5 も 、 狭 義 に お 


いて は 同じ よう に 


アッ プ だ け の 仕様 と 言え ます が 、 広 義 に お いて は javaScript や 


CSS を 含 お 様々 な 仕様 の 集まり と な っ て いま す 。 それ は 、HTML5 が Web ア プリ ケー ショ 


ン を 制作 する た め の 言 語 と し て 考え られ て いる か ら で す 。 
Web ア プリ ケー ショ ン は 、VWeb 上 で デー タ を 閲覧 し 、 制 作 し 、 保 存する こと が で き 


ane 


える と わが か りや すい で し ょ う 。 


Web ア プリ ケー ショ ン 


ン で す 。 Google の サー ビス (Gmail、Google カ レン ダー 等 ) を 考 


よ 、HTML だ け で は 作る こと が で きま せん 。 使い や すい イン ター 


フェ ー ス を 作る た め に は 、CS5 に よる テキ スト の 装飾 や ウイ アウ ト の 工夫 が 欠 が せま せん 。 


まだ た 、 ス 


得する な どの 機能 を 追加 する 必要 も ある で し よう 。 


HTML5 は 、HTML、 CSS、 」avaScript を 使っ つて 、VWeD ア プリ ケー ショ 
りや すく する こと を 方 針 付 け て いま す 。 各 言 語 の が 


E 化 の 概 g 


リプ ト 言 語 を 使っ て 計算 を し た り 、Web カ メラ と つない だ り 、 位 置 情報 を 取 


ン を も っ と 作 


委 を 


うつ J 


Ii 


SET 


・ 見 た 目 だ け の 要素 の 廃止 


・ プ ラグ イン 不要 の 動画 、 
楽 配信 機能 の 追加 


三 | 


に っ 


・ 人 入力 フォ ー ム 用 要素 の 強化 


・ セ クシ ョ ン な ど 、 大 枠 の 意 


味付け を する 要素 の 追加 


・ オ フラ イン 時 の 表示 機能 の 
追加 な ど 


・Web 上 の 書体 の 指定 機能 


を 追加 


・ 動 き に 関す る プロ パテ ィ の 


追加 


JavaScript の 進化 


・ 位 置 情報 機能 の 追加 


・ フ ァイル の 読み 書き 機能 の 追加 
・Web カメ ラ と の 連携 機能 の 


・ 影 に 関す る プロ パテ ィ の 追加 


追加 


・ 透 明度 に 関す る プロ パテ ィ 


の 追加 


・ 傾 き の 検 出 機能 の 追加 


・ ブ ラウ ザ の デー タベース 機 


・ 角 丸 に 関す る プロ パテ ィ の 


追加 な ど 


能 の 追加 な ど 


これ ら の 仕様 よ 、 ま だ 策定 d 


H の 人 


業 を 続け こぐ いま すし 、 ブ ラウ ザ へ の 実装 も 進ん で いま す 。 8 
ざれ て 、 も っ と 便利 な Web ア プリ ケー ショ 


また 、 
ン を 作る こと が で きる よう に な る で し よう 。 


上 様 が 多い で す が 、 完 成 へ 向け て 様々 な 技術 者 が 策定 作 


今後 も 様々 な 仕様 が 追加 


@@@@O す すみ 
段落 を 表す 


| <p> 電 </p> 
| @ 段落 と な る テキ スト 


> ぐに ビ ミ コ エ 


ke 中 UP 司 章 フロ ー・ コンテンツ な に Ko 婦 の 則 フレ ー ジ ング ・ コ ン テ ン ツ 


BBHHED 

D 要 素 は 、 段 落 を 示し ます 。 主 に 文章 に け サン プル で は 、 「 好 き な 酒 は INRO で す 。 

利用 され ます 。 最近 は いろ ん な ]INRO が あり ます ね 。」 と 
た だ し 、 他 に 適切 な 要素 が ある 場合 に は _ いう テキ スト に bp 要素 を 指定 し て いま す 。 


D 要 素 を 使用 すべ き で は あり ませ ん 。 例え _ その た め 、 ブ ラウ ザ で 表示 し た と き に 、 通 
ば 、 連 絡 先 を 示す 部 分 に は address 要 素 常 の テキ スト の 表示 され る こと が わか り ま 
を 利用 する の が 適切 で す 。 』 

また 、 文 章 の 途中 に 箇条 書き の 部 分 が 挟 

まる 場合 は 、 箇 条 書 き の 部 分 に ul 要素 を 

使用 し 、 前 Rd 回 吊 の p 要 素 を 利 
する か 、 箇 条 書 き の 部 分 も 含め て ひ と つの 
div 要 素 で まとめ て マー クア ッ プ する の が 
適切 で す 。 


1 
キ 
スズ 

ト 
の 
表 
小 


く !DOCTYPE htmt> 

<htmt tang="a"> 

<head> 

<meta charset=Wutf-8!> 
<titte> 段 落 を 表す </ttte> 
馬 下 k/head> 

< く body> 


<p> 好 き な 酒 は JTNRO で す 。 最近 は いろ ん な JTNRO 
が あり ます ね 。</p> 

く ul> 

く Li>JTNRO DRY</1t ュ > 

<Li>JTNROH 一 嘘つき は 誰 だ 一 </11> ・ JINRO DRY 

<LUi> 映 画 ITNTROH </L1> ・ JINROH 一 嘘つき は 誰 だ 一 
く /ut> ら NR 

0 映画 「JIN-ROH 
</html> 


好き な 酒 は JINRO で す 。 最 近 は いろ ん な JINRO が あ 


り ま すね 。 
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@@@@O@ 


段落 の テー マ 区 切り を 入れ る 


| <hr> 


内 包 で きる も の 重 <% の 


HMS 更新 


hr 要素 は 段落 の テー マ 区 切り を 示し ま 
す 。 例 えば 小説 の よう な テキ スト で は 、 段 
落 間 の シー ン の 区 切り に 使う こと が で きま 
す 。 

セク ショ ン を 作る 要素 (article 要 素 
aside 要 素 、 nav 要 素 、 section 要素 な ど ) 
同士 の 間 に 、hr 要素 を 利用 する 必要 は あ 
り ま せん 。 それ ら の 要素 は テー マ が 切り 替 
わる こと を 示す か ら で す 。 

け サン ブル で は 、 点 た つの p 要 素 の 間 に 
hr 要素 を 指定 し て いま す 。 その た め 、 ブ 
ラウ ザ で 表示 し た と き に 、 ふ た つの テキ ス 


陳 生 選 MANA 
<!DOCTYPE htmt> 
<htmt tang="]a"> 

<head> 

<meta charset=Wutf-8 リ > 
<titte> 段 落 の テー マ 区 切り を 入れ る </titte> 
</head> 

<body> 


(中略! 

<p> ち いす うた ろ が </p> 

<hr> 

<p> 薄 っ 。 鉄 分 が 薄い よー。 あ れ 飲 ん で 。</p> 
</body> 1 

</htmt> 


ト の 間 に 区 切り 線 が 表示 され 、 シ ー ン の 
切り に な っ て いる こと が わか り ま す 。 


ブラ ウザ 表示 


も いさ ュ も 3 か 


ちぃ すう た ろか 


薄 っ 。 鉄 分 が 薄い よー。 あ れ 飲 ん で 。 
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>IN ざ NN に ビビ ミコ エ 


デ テ 
キ 
ズ ス 
ト 
(の ) 
表 
小 


2 ぐに ビ ミ コ エ 


ya 
キ 
ス 
ト 
の) 
表 
示 


@eeweo# ぁ 
改行 を 入れ る 


フロ ー・ コ ン テ ン ツ 、 フレ ー ジ ング ・ コ ン テ ン ツ 


内 包 で きる も の 量 24 明 


Dr 要素 は 、 必 ず 改 行 す る 位置 を 示し 
ます 。 

この 改行 は 、 例 えば 詩 や 住所 、 文 章 の 句 
読点 の 後に 入る 改行 の よう に 、 改 行 が あ 
る こと が 実際 に 正しい 場合 の 改行 を 指し 
ます 。 

その た め 、 文 章 が 入っ て いる エリ ア の 幅 
が 変更 され た り 、 文 字 サ イズ が 変更 され た 
りす る と 、 改 行 箇所 が 変化 し て し まう よう 
な 場合 に は 、br 要 素 を 入れ る の は 適切 で 
まあ り ま せん 。 

け サン プル で は 、「 フ ラン ケン 死体 ん 」 と 


< く !DOCTYPE htmt> 
<htmt tang="]a"> 

<head> 

<meta charset="!utf-8!> 
<titte> 改 行 を 入れ る </titte> 
</head> 


<p> フ ラン ケン 死体 ん <br> 
その と お り で す が な に か ?</p> 
</body> 8 
</htmt> 


いう テキ スト の 次 に br 要素 を 指定 し て い 


ます 。 その た め 、 ブ ラウ ザ で 表示 し た と き 
に 、 こ の 部 分 で 改行 され る こと が わか り ま 
す 。 


フラ ン ケ ン 死 体 ん を 十 ヨ ヨ ] 
その と お り で す が な に か ? 
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UKJKUE 1 
長い 英字 や 数 字 の 改行 位置 を 表す 


< く wbr> 


H 
T 
M 
L 
リ 
4 
が 
レ 
ン 
ス 


E 計 0 電 勝 フロ ー . コン テン ツ 、 フレ ー ジ ング - コ ン テ ン ツ  EK ま 的 湯 な し 


SHISHI ジジ 
wbr 要 素 は 改行 が 可能 な 位置 を 示し ま ます 。 

すず 。 

例え ば URL や プロ グラ ム の よう な 英 数 
字 の まとまり を 、 意味 の 通じ る 文字 の 単位 
で 改行 させ る こと が で きま す 。 

また 、 固 有名 詞 な ど 、 改行 を 含め た く な 
し 文字 の まとまり の 改行 位置 を コン トロ ー 
ル す る の に 利用 で きま す 。 

サン プル で は 、 画 像 の URL 内 に wbr 要 
素 を 指定 し て いま す 。 その た め 、 ブ ラウ ザ 
で 表示 し た と き に 、wbr 要素 を 挿入 し た 
所 の いずれ か で 改行 され る こと が わか り 


則 


RI 

<htmt tang="]a リ "> 

<head> 

<meta charset=Wutf-8> 

<titte> 長 い 英 字 や 数 字 の 改行 位置 を 表す </ 
ttte> 


@e 計 まく 5ー せん 


</head> 
く <body> 
<p> 目 の 前 まっ くら ー け ん <br> | 目 の 前 まっ くら ー け ん 

画像 の URL : 59493<wbr>big<wbr>deep<wbr> | 画像 の URL : S0403bigdeepquietdarknesshas 
qutet<wbr>darkness<wbr>has<wbr>spread | | spreadfrontofme.gif 
Null g1f</p> | 
</body> | 
</htmt> 
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> で NN に ビ ミ コ エ 


9 
キ 
スズ 

ト 
の 
表 
示 


ら @@@0 生 る 
重要 性 や 強調 を 表す 


構 

| | < く em> 坦 </em> 

| | <strong> 全 </strong> 
| <b> 圏 </b> 


@~ 男 意味 付け する テキ スト 


em 要素 、strong 要 素 、Db 要 素 は それ ぞ 
れ 以 下 の 意 味 を 示し ます 。 


* em… 強 調 を 示し ます 。 文章 に な く て は 
な ら な い 部 分 に 使用 し ます 。 そ の た め 、 
使わ れる 場所 に よっ て 文章 の 意味 が 変 
わり ます 。 

* strong… 重 要 性 を 示し ます 。 使 われ る 
場所 に よっ て 文章 の 意味 が 変わ る こと 
は あり ませ ん 。 

・ b… 強 調 も 重要 性 も 示し ませ ん が 、 注 意 
を ひく こと で 実際 に ユー ザー に 役立つ 
部 分 を 示し ます 。 


く !DOCTYPE htmLl> 

<htmt tang=!a"> 

く <head> 

< く meta charset=Wutf-8 リ > 
<titte> 重 要 性 や 強調 を 表す </titLe> 
[中路 

</head> 

<body> 


<p> 好 き な 武 器 は <em> バ ズー カ </em> で す 。</p> 
<p> 一 あな た に と っ て バズ ー カ は どん な 武器 で す 
か ?</p> 1 | 
<p><strong> い つも そば に ある 武器 で すね 。</ 


EE 蘭 ロー コン テン ツ 、 フレ ー ジ ング ・ コ ン テ ン ツ 人 守 負 人 3 清 フレ ー ジ ング コンテンツ 


Strong> く /D>. 
NM 
</htm1l> strong 

0 


_HTML5 更新 


了 ジ / 


em 要素 も strong 要 素 も や 、 そ れ ぞ れ 入 
れ 子 (<em><em> さら に 強く 強調 する 内 容 
</em></em> 等 ) に する こと で 意味 を 強め 
る こと が で きま す 。 

b 要 素 は 、 要 約 内 の キー ワー ド 、 レ ビュ 
内 の 製品 名 、 記 事 の リー ド 文 な ど に 利用 で 
ます が 、 基 本 的 に は 他 ( に 適切 な 要素 が な 
い 場 合 に 使用 する 要素 と 考え まし ょ う 。 


| ブラ ウ が 表示 


な 京 寺 は 
ニカ で すす 
い 】 
ゃ 


| 】 


| em | 
好き な 武器 は /『 ダ マーカ で す 。 


ー あ な た に と っ て パ ズ ー カ は どん な 武器 で すか ? 
いつ も そば に ある 武器 で すね 。 
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5.1 


6@e@O*@ ら 


上 付き 文字 ・ 下 付き 文字 に する 


<sup> 坦 </sup> 

< く sub> 含 く / sub> 
但 … 上 付き に する テキ スト 
人 る … 下 付き に する テキ スト 


フロ ー ・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 


に 本 到 %21 の 環 フレ ー ジ ング ・ コ ン テ ン ツ 


Sup 要素 は 上 付き 文字 (SupersCript)、 


等 )、" な どの 記号 に 、sub 要 素 は 化学 式 


sub 要 素 は 下 付き 文字 (Subscript) を 示 の 原子 の 個数 (( 〇 。」 等 ) に 使用 する こと 
し ます 。 が で きま す 。 

いずれ も 、 単 に 見 た 目 上 の 効果 の た め に サン プル で は 、「※」 と いう テキ スト に 
使用 する 要素 で は あり ませ ん 。 SUD 要 素 を 指定 し て いま す 。 その た め 、 ブ 


SuDp 要 素 は 数 学 の べき 乗 の 数 字 、 脚 注 
参照 を 促す テキ スト 、 単 位 に 添え る 数 字 、 
TM な どの 記号 に 利用 し ます 。sub 要 素 は 
化学 式 の 原子 の 個数 や 数 学 の 下 付き の 添字 
に 利用 し ます 。 
例え ば 、sup 要 素 は 数 学 の べき 乗 (| 27] 
等 ) 、 肝 注 参照 ([ ※ 1] 等 ) 、 単 位 記号 ([cm] 


< く !DOCTYPE html> 
<htmt tang="a"> 

<head> 

<meta charset=Wutf-8"> 
<titue> 上 付き 文字 ・ 下 付き 文字 に する </titte> 
</head> 

<body> 


63 吉 KSUP> 拉 2/ SlipO く 7B> 
<p>※3 年 2 ヵ月 一 人 旅 に 行か され ます </p> 


bod | ピ 交 
MAI | 大 燥 ※ 
| ※3 年 2 ヵ月 一 人 旅 に 行か され ます 
| 
剛 あい 


ラウ ザ で 表示 し た と き に 、 こ の 部 分 が 上 付 
寺 文 字 に な る こと が わか り ま す 。 


| ブラ ウザ 表示 
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>2JN ぐ NN に ビビ ミ ゴ エ 


テ 
キ 
スズ 

ト 
の 
表 
示 


ら @@@0 ゃ 9 


追加 ・ 削 際 箇 所 を 表す 


| <]jns cite=" 電 "datet1me=" 全 "> 略 </1ns> 
|」<det cte=" 夫 " datetime=" 人 "> 圏 </de1> 
| <s> 圏 </s> 

|) 旬 次 更 を 説明 する 文書 の URL 
| ^ … 追加 ・ 削 除 し た 日 

較 … 意 味付け する テキ スト 


> で NN に ミコ エ 


ins、del : フロ ー・ コ ン テ ン ツ 内 包 で きる も の 重 記 直 cicl 
5 回 5x ジ ラー バツ 22o25 ル ん グ 所 ウデ ジウ, del: 透過 
Ss ワウ ョ ジン グ :。 コ ン テ シ ツウ 


del 要 素 、ins 要 素 、s 要 素 は それ ぞ れ 以 が か で 示す こと が で きま す 。 
下 の 意味 を 示し ます 。 


* Ss… す で に 正しく な い 、 も し く は 関わ り 刻 …2014-11-12T14:54+09:00 
の な い 内 容 


9 : 年 月 日 …2014-11-12 

ス * Ins… 文 書 へ の 追加 * 年 月 日 と 時 刻 …2014-11-12T14:54 

< del… 文 書か ら の 削除 ・ 標準 時 の タイ ム ゾ ー ン を 含む 年 月 日 と 時 
表 

7\ 


Ss 要素 は 、del 要 素 と 似 て いま す が 、del 

del 要 素 、ins 要素 の cite 属 性 は 、 変 更 要素 が 文書 か ら の 削除 を 示す だ け に 対し 

を 説明 する 文書 の URL を 示す こと が で き て 、s 要 素 は 内 容 が 正しく な いか 、 関 わり 

ます 。 が な いこ と を 示す 点 が 異な り ま す 。 ま た 、 

del 要 素 、ins 要素 の datetime 属 性 は 、 説明 の た め の URL、 編 集 し た 日 時 を 記述 
追加 ・ 削 除 し た 日 時 を 下記 の 形式 の いずれ しない 点 も 異な り ま す 。 


サッ プル ソース ) 

く !DOCTYPE htmL> 

<htmL tang="]a"> 

<head> 

<meta charset=Wutf-8 リ > 
<titte> 追 加 ・ 削 除 箇所 を 表す </t1tte> 
</head> 

く body> 


| <p><det> 見 た 目 </det><ins> 見 て る </ ns> だ け </p> 
| </body> ら 
| </htmt> 晃 圧 且 見 て る だ け 
1 

申 del 
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KJLJLULIL) 
テキ スト に 適切 な 意味 付け を する ① 


<]1> 坦 </]> 
く u> 念 く /u> 
<smatl> 太 </smatL> 


人 で - 圏 … 意 味付け する テキ スト 


> で NN に ビ ミ ゴ エ 


(EET 電 フ ロ ー コン テン ツ 、 フレ ー ジ ング ・ コ ン テ ン ツ EE 革 場 フレ ー ジ ング ・ コ ン テ ン ツ 


i 要 素 、u 要 素 、small 要 素 は 、 そ れ ぞ ト や 外国 語 の 名 前 な ど ) 
れ に 決ま っ た 「 意 味付け ] を する 要素 で す 。  * small… 細 目 の よ うな 注釈 (誤解 を 避 
表示 を 変え る た め に 使用 する 要素 で は な く ける た め の 注 意 書 き 、 警 告 、 法 的 制限 、 
な り ま し た 。 コピ ー ラ イト を 表す 法律 用 語 な ど ) を 
それ ぞ れ 以下 の よう な 意味 が あり ます 。 示す 


* |… 声 や 雰囲気 を 示す テキ スト 、 分 類 学 
的 な 指定 、 技術 用 語 、 他 言語 の 慣用 句 
な ど を 示す 

*: u… ブ ラウ ザ に 表示 され て いる が 、 発 音 
が 明確 で な いた め 、 注 釈 が 必要 な テキ 
スト を 示す (スペ ルミ ス が ある テキ ス 


7 
ピコ 
ス 

ト 
の) 
表 
示 


<ipocTyPE htm1> 

<htmt tang=!"]a"> 

< く head> 

<meta charset="utf-8"> 

<titLe> テ キス ト に 適切 な 意味 付け を する (1)</titte> 
</head> 

く body> 

<p><smaLL>&copyj 2914 技術 評論 社 </smatU></p> 
</body> 

</htmt> 


ゞ 2014 技術 評論 社 
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> で へ に ビ ミ ゴ エ 


デ 
キ 
ス 
ト 
(の ) 
表 
示 


5.1 


@@@@O$@ 


テキ スト に 適切 な 意味 付け を する (②⑫ 


| <cite> 坦 </c1te> 
上 sa| く <Code> 含 </code> 
、| <kbd> 較 </kbd> 
<var> 均 </Var> 
<samp> 多 </samp> 


倫 ご … 意味 付け する テキ スト 


@E 計 本 フロ ー コン テン ツ 、 フレ ー ジ ング ・ コ ン テ ン ツ EE 人 湯 フレ ー ジ ング ・ コ ン テ ン ツ 


り / 


Cite 要素 、code 要 素 、kbd 要 素 、Vvar 
要素 、samp 要 素 は それ ぞ れ 以 下 の 意味 を 
示し ます 。 


Cite… 作 品 の タイ トル 

* Code… コ ン ビ ピュー ター の コー ド の 一 部 
分 (要素 名 、 フ ァイル 名 、 プ ログ ラム 
な ど 、 コ ンピュータ ー が 認識 する 文字 ) 

・ kbd… ユ ー ザ ー の 入力 (キー ボー ド 入 

、 音 声 コ マン ド な ど ) 

s Var… 変 数 (数 式 や プロ グラ ム の 変数 な 

ど ) 


| サ ツ プ ルソー エメ J 
< く !DOCTYPE html> 

く <htmt tang="]a"> 

<head> 

<meta charset=Wutf-8!> 

<titte> テ キス ト に 適切 な 意味 付け を する (2)</ 
て 1tte> 

</head> 

<body> 


中 略 

<p> 半 魚 人 の 映画 と いえ ば 「<cite> 大 アマ ゾン の 
半 魚 人 </cte>」 で すね </p> 

</body> 

く /htmLt> 


* samP… プ ログ ラム や コン ピュ ー タ ー の 
シス テム が 出力 し た も の 


kbd 要 素 が samp 要 素 内 に め ある と き 、 
kbd 要 素 は 、 シ ステ ム が 画面 に 出力 し た 
ユー ザー の 入力 を 示し ます 。 

kbd 要 素 が samp 要 素 を 含む お と き 、 
kbd 要 素 は 、 シ ステ ム の 出力 に も と づい 
た 入力 を 示し ます 。 

kbd 要 素 が kbd 要 素 内 に ある と き 、 
kbd 要 素 は 、 実 際 の キー 操作 を 示し ます 。 


ブラ ウサ 表示 | 


半 灸 人 の 映画 と いえ ば 「 大 アマ ゾン の 学名 人 」 で すね 
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KKJKUEIL) 


略語 で ある こと を 表す 


但 … 元 の 言葉 


<abbr て itte=" 坦 "> 全く </abbr> 


の リー フロ ー ・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 統 下 k ま 拓 3 場 フレ ー ジ ング コンテンツ 


abbr 要 素 は 略語 や 頭 文字 を 示し ます 。 
ttle 属 性 は 元 の 言葉 を 示す こと が で きま 
す 。 

略語 に 必ず abbr 要素 を 使う 必要 は あり 
ませ ん が 、 下 記 の 場合 は 便利 に 使え る で 
し よう 。 


* 元 の 言葉 を つけ た い 略 語 … 元 の 言葉 を 
abbr 要 素 の title 属性 で 提供 する と 、 文 
章 内 に 元 の 言葉 を 書く べ 代 わり に な り ま す 。 

> 読者 が よく 知ら な い 略 語 … 元 の 言葉 を 
abbr 要 素 の title 属 性 で 提供 する か 、 略 
語 が 最初 に 出 て きた と き に 元 の 言葉 を 


く !DOCTYPE html> 
<htmt tang="]a"> 

く head> 

<meta charset=Wutf-8 リ > 
<titte> 略 語 で ある こと を 表す </titte> 


中 

</head> 

<body> 

<p><abbr titLe="Tamago Kake Gohan"> 
TKe</abbr> は 日 本 人 が 育て た 。</p> 
</body> 

</htmt> 


書く と よい で す 。 

> 意味 的 に 注釈 を つけ る 必要 が ある 略語 
… 例 えば 、 ス タイ ル シ ー ト で abbr 要 素 
に 特定 の スタ イル を 指定 する 場合 で す 。 
この 場合 、abbr 要 素 に title 属 性 を 指 
定 せ ず に 使用 で きま す 。 


いっ た ん 略語 の 元 の 言葉 を abbr 要 素 の 
title 属 性 で 示し た 後 は 、 同 じ 略 語 を title 
属性 な し の abbr 要素 で マー クア ッ プ し て 
も よい で し ょ う 。 し か し 、 す べ て の abbr 
要素 は 独立 し て いる と 考え て 、 別 々 の 
tttle 属性 を 指定 する こと も 可能 で す 。 


1 
Tamago Kake Cohan 


06Z 


AN ぐに ミコ エ 


ジコ 
ビ コ 
ス 
回 
の 
表 
示 


> ぐに ビ ミ ゴ エ 


0 
キ 
ス 

ド 
の 
表 
門 


まき 22 を 518 


>@l@i@O%@ 


長い 文章 の 8 用 を 表す 


… 引用 元 の URL 
… 引用 し て いる 内 容 


フロ ー . コンテンツ 、 セ クシ ョ ニン グ ・ ル ー ト 


<btockquote cite=" 電 "> 全 </bLockquote> 


な に kk の 募 フロ ー ・ コ ン テ ン ツ 


blockquote 要 素 は 、 別 ソー ス か ら 引 
され て いる セク ショ ン を 示し ます 。 
Cite 属性 は 、 引 用 元 の URL を 示し ます 。 
用 元 の 作者 や 文献 な どの 情報 が ある 場合 
よ 、blockquote 要 素 の 外 に 記述 し ます 。 
例え ば 、blockquote 要 素 の 下 に 、 作 
者 や 文献 な どの ] 震 報 を p 要 素 で マー クア ッ 
プ し た り 、figure 要 素 内 に blockquote 
要素 を 入れ て 、 作 者 や 文献 な どの 情報 を 
figcaption 要 素 で マー クア ッ プ し た りす 
る こと が で きま す 。 

サン プル で は 、「 元 旦 正午 、DC 四 型 


一 ーーーーーーーー、 


三 


UTU 


<ipocTypE 

<htmL Lang=")a"> 

く head> 

<meta charset=Wutf-8 リ > 

<ttte> 長 い 文章 の 引用 を 表す </titLe> 

人 Hi/head> 

く body> 

<btockquote Cite= リ ht も Di / /Www.aozora・ 
gr.]p/cards/991995/f1tes/45896_34359. 
IhtmL"> 元旦 正 年 、DC 四 型 四 発 機 は 滑走 路 を 
走り だ し た 。 ニコ ニコ と 親切 な 米 人 の エア ガー ル 
が 外 奏 を 預 る 。 葉 革 </bUockquote> 

</body> 

</htmt> 


四 発 機 は 滑走 路 を …] と いう テキ スト に 
blockquote 要 素 を 指定 
の た め 、 引 用 部 分 で め る こと が わか り ま す 。 


定 し て いま す 。 そ 


元旦 正 盾 、D C 四 型 四 発 幾 は 滑走 路 を 走 
り だ し た 。 ニ ニコ ニコ と 親切 な 米 人 の エア ガ 
ー ル が 外 奏 を 預 る 。 真冬 の 四 千 メー トル の 
高空 を 二 〇 度 の 適温 で 旅行 させ て くれ る 。 
落下 傘 や 酸素 吸入 器 な ど 前 世紀 的 な も の は 
と こ に は 存在 し な い 。 爆音 も 有 っ て 無き が 
如く 、 普 通 に 会 話 が で きる の は 流石 さす が 
で ある 。 | 
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aleleleloW8 
短い テキ スト の 引用 を 表す 


<q cte=" 夫 > 全 </q> 


但 … 引用 元 の URL 
今 … 引用 し て いる 内 容 


>2JN ぐ NN に ビ ミ ゴ エ 


2 電 蘭 フロ ー コン テン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 雪 3E ま 計 332 泊 フレ ー ジ ング ・ コ ン テ ン ツ 


d 要素 は 、 別 ソー ス か ら 引 用 され て いる と は 、5 用 符 を 使用 し な いで q 要素 を 使用 
フレ ー ジ ング ・ コ ン テ ン ツ (た だ の テキ ス する の と 同様 に 正しい で す 。 
ト も 含 お ) を 示し ます 。 サン プル で は 、「 白 い 歯 っ て いい な 」 と 
Cite 属性 は 、 引 用 元 の URL を 示し ます 。 いう テキ スト に og 要 素 を 指定 し て いま す 。 
q 要 素 の 前 後 や 内 部 に 「"] な どの 引用 _。 その た め 、 ブ ラウ ザ で 表示 し た と き に 、 こ 
符 を 挿入 し て は いけ ませ ん 。 引用 待 は ブラ の 部 分 が 括弧 で 囲 われ 、 引 用 部 分 で ある こ 
ウザ が 挿入 し ます 。 と が わか り ま す 。 
また 、 引 用 と 関係 な く 、 単 に 引用 符 を つ 
ける 代わ り に q 要 素 を 使用 し て は いけ ませ 
ん 。 
要素 を 使用 し て 引用 を 示す か どう か は 
意 で す 。 引用 符 を 使用 し て 引用 を 志す こ 


テ 
キ 
ス 

ト 
() 
表 
示 


記 本 MuLON 


<htmt tang="]a"> 

<head> 

< く meta charset="utf-8"> 
<tjtte> 短 い テ キス ト の 引用 を 表す </titte> 
< く /head> 

く body> 


中 略 引 

<p> 女 性 は <q> 和 白い 歯 っ て いい な </q> と 言っ た </p> 
</body> 

</htm1> 


| 女性 は 「 白 い 歯 っ て いい な 」 と 言っ た 
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AN で へ に ビ ミ コ エ 


og 
キ 
スズ 
ト 
の 
表 
PIN 


@lelewle@lo| 拓 る 


| 


<pre> 電 </pre> 


フロ ー コテ ッッ 


改行 や あ ス ペー ス を その まま 表示 する 


便 … 改行 や スペ ー ス を その まま 表示 する テキ スト 


EEWcc を ox め 蘭 フレ ー ジ ング ・ コ ン テ ン ツ 


pre 要 素 は 、 改 行 や スペ ー ス を 入れ て 形 
を 整え た テキ スト の 部 分 を 示し ます 。 
下記 は 、pre 要 素 が 使用 され る 場面 の 例 
で す 。 


: 電子 メー ル を 訪 め る : テキ スト の 上 下 に 
空 行 を 入れ て 段落 を 示し た り 、 行 頭 に 
空白 を 使い リス ト を 示し た り し ます 。 

> コン ビ ピュー ター の プロ グラ ム の 一 部 を 癌 
め る 

・ ASCII ア ー ト を 表示 する 


コン ピュ ー タ ー の プロ グラ ム の 一 部 を 


示す に は 、pre 要 素 と と も に code 要 素 を 


使う こと が で きま す 。 ま た 、 コ 


2 世 操 一 


ター の 出力 を 示す に は 、pre 要素 と と も に 


samp 要 素 を 使う こと が で きま す 。 ユ 
ザー が 入力 する テキ スト を 示す に は 、pre 
要素 と と も に kbd 要 素 を 使う こと が で き 


ます 。 


く !DOCTYPE htmL> 
<htmt Lang="]a"> 

く <head> 

< く meta charset="utf-8 リ > 


区 届 : 衣 /head> 

く body> 

中 賠 | 

<pre> 拝 啓 

と うと どう うち も 畳 か の ら フ ロー リン グ に 
変え よう と 思い ます 。. よろ し くど う ぞ 。 


敬具 
平成 26 年 3 月 吉日 

宿主 
座敷 童 様 </pre> 
</body> 
</htm1> 


<titLe> 改 行 や スペ ー ス を その まま 表示 する </t1tLe> | 


たよ せ S 


寺 で いぼ 


拝啓 


平成 6 年 3 月 吉日 


宿主 


座敷 童 欄 


と うと うう ち も 畳 か ら フ ロー リン グ に 
変え よう と 思い ます 。 よ ろ し くど う ぞ 。 
敬具 
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2.2 5.1 


@@ ee@0OW@ 


ルビ (ふり が な ) を 表す 


<ruby> 


< く /ruby> 


但 … ルビ を つけ る 元 の 文字 
合 … 始め 括弧 
圏 … ル ビ 

直 … 終わ り 括弧 


Tp: な し 
It : な し 


ruby : フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 


倫 <rp> 全 </rp><rt> 較 </rt><rp> 支 </rp> 


2 に Kee 玉 k21 の 鎌 「Uby : 本 文 を 参照 
ip: フレ ー ジ ング ・ ロ シン テ シ ツ 
UI タレ ニモ ジ シグ ロジ ウデ 


ruby 要素 は 、 ひ と つも し く は 複数 の フ 
レー ジン グ ・ コ ン テ ン ツ に 、 ルビ ピ を 振る こ 
と が で きる よう に し ます 。 
ルビ と は 、 読 み 方 の 補助 と な る テキ スト 
を 元 の 文字 の そば に 表記 する も の で す 。 

人 t 要 素 は 、 直 前 に ある 坦 の 読み 方 を 補助 す 
る テキ スト を 示し ます 。 

rp 要素 は 、 ル ビ ピ 表記 を サポー ト し て い 

な い ブ ラウ ザ で 環 を 囲う 括弧 を 示し ます 。 


< く htmt tang="]a"> 

く head> 

<meta charset="utf-8"> 
<titte> ル ビ ( ふ り が な ) を 表す </titte> 
</head> 

く body> 
<p><ruby> 大 太郎 法師 <rp> (</rp> 
<rt> ダ イダ ラボ ッ チ </rt> 

<rp>) </rp> く /ruby></p> 
</body> 

</htmt> 


に 


読み を 記述 する か どう か に よっ て 異な り ま 
す (例え ば 、「 東 南 ] の ルビ ピ に 「 と うな ん 」 
「Southeast] の どちら も 記述 する か どう 
か な ど )。 


* 複数 記述 し な い : フレ ー ジ ング ・ コ ン テ 
ン ツ (子孫 に ruby 要素 を 持た な い ) 

* 複数 記述 する : ひと つの ruby 要 素 ( 子 
孫 に ruby 要素 を 持た な い ) 


ピラ ウザ 表示 


俊 は な た 凍 が みな ぃ 


ダイ ダラ ポッ チ 


大 太郎 法師 


071 


> で NN に ミコ エ 


の 


5 
キ 
ス 

に 
の 
表 
MKY 


@lelelelo# る 
日 時 を 表す 


<t1me datet1me=" 直 "> 全 </t1me> 
人 ひ 日 時 を 示す テキ スト 
合 … 日 時 を 示す テキ スト 
(日 本 語 を 含む こと も 可能 ) 


> ぐに ミコ エ 


部 隊 蘭 フロ ー . コンテンツ 、 フ レー ジン グ - コンテンツ 幼 EK ま 和議 フレ ー ジ ング ・ コ ン テ ン ツ 


time 要 素 は 、24 時 間 表 記 の 時 刻 や 西暦 
こ お け る 正確 な 日 付 を 示し ます 。 
datetime 属性 の 属性 値 載 と 、datetime 
属性 を 指定 し て いな いと き の 内 容 人 に は 、 
決ま っ た 形式 の 日 付 や 時 刻 を 書く 必要 が あ 


: 年 月 日 と 時 刻 …2014-11-12T14:54 

: 標準 圭 の タイ ム ゾ ー ン を 含む 年 月 日 と 時 
刻 …2014-11-12T14:54+99:99 

: 週 …2914-W46 


E 全 計り ます 。 datetime 属 性 の 値 介 を 記述 し て いる 場 
代 識 。 い 下 は その 形式 に な ら っ た 書き 方 の 例 合 、 内 容 る は 「2014 年 11 月 ]」 の よう に 
の 攻 G 自由 に 年 月 日 、 日 時 を 記述 で きま す 。 

生 time 要 素 を 使用 し て も 表示 上 な に も 起 


* 年 月 …2914-11 

* 年 月 日 …2014-11-12 
* 月 日 …11-12 

* 時 刻 …14:54 


こり ませ ん が 、 ど ん な 言語 早 の アプリケー 
ショ ン に も 日 付 、 時 間 の デー タ を 提供 で き 
ます 。 


く !DOCTYPE htmt> 

<htmL tang="]a"> 

<head> 

<meta charset="utf-8 リ "> 
<titte> 日 時 を 表す </t1tte> 

く /head> 

< く body> 

<p><time datetjme="2013-99-07">2013 年 9 
月 7 日 </time>x の こと で し た 。</p> 
</body> 

</htmL> 


2013 年 9 月 7 日 の こと で し た 。 
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る le@ieleo サ @ 


を 22 51 


ハイ ライ ト 表 示す る 


| 
" 
プ 


NH 


<mark> 二 </mark> 
価 … ハイ ライ ト 表 示す る テキ スト 


フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 


愉快 叶 鐘 3 め 島 フレ ー ジ ング ・ コ ン テ ン ツ 
ンジ 


mark 要 素 は 、 別 の コン テキ スト ( 他 の 
Web サ イト や ペー ジ 、 文 献 な ど ) と の 関 


連 伯 を 示す た め に 、 参 照 目 的 で マー ク し た 


り 、 八 イラ イト 表示 し た りす る テキ スト を 


定義 し ます 。 


引用 箇所 の 特定 の 部 分 に FI を つけ る と い 


う 用 途 で mark 要素 を 使っ た り 、 検 索 結果 


画面 で 検索 キー ワー ド が 使わ れ て いる 箇所 


を バハ イラ イト 表示 し た りす る の に 使う こと 


が で きま す 。 
サン プル で 


よ 、「 イ ケ メ ン 」] と いう テキ 


スト に mark 要 素 を 指定 し て いま す 。 その 


</head> 
く <body> 


<html tang="]a"> 
<head> 


<meta charset=Wutf-8 リ > 
<titte> ハ イラ イト 表示 する </titte> 


<p> ス キー を する の も 見 る の も 好き 。 <br> 
た だ し 、 見 る の は <mark> イ ケ メ ン </mark> 
に 限る の 。<br> 

大 事 だ か ら 2 回 言う わ 、 見 る の は 
<mark> イ ケ メ ン </mark> に 限る の 。</p> 
</body> 

く </htmt> 


た め 、 ブ ラウ ザ で 表示 し た と き に 、 こ の 部 
分 が ハイ ライ ト 表 示さ れる こと が わか り ま 
す 。 


AV で へ | に ビ ミ ゴ エ 


(ep) 


引 申 アキコ 


人 


スキ ー を する の も 見 る の も 好き な の 。 
た だ し 、 見 る の は 攻 女 メジ に 限る の 。 
大 事 だ か ら 2 回 言う わ 、 晃 る の は Q グ に 限る の 。 
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XN で SN に ビ ミ コ エ 


テ 
キ 
ス 
ト 
の 
表 
2 ぶ ホ 


5.1 


@leeleo#@9 


| <bdi> 圏 </bdi> 
坦 … Itr も し く は rtl 


今 … 文字 を 書き 進め る 方 向 を 変更 する テキ スト 
詳 … 文字 を 書き 進め る 方 向 を 周り か ら 分 離さ せる テキ スト 


E 放 0 誠 蘭 フロ ー コン テン ツ 、 フ レージ ング ・ コ ン テ ン ツ EE 池 3 則 フレ ー ジ ング ・ コンテンツ 


文字 を 書き 進め る 方 向 を コン トロ ー ル する 


bdo 要 素 は 、dir 属 性 を 使用 し て 明確 に 
文字 を 書き 進め る 方 向 ( 書 字 方 向 ) を 示し 
ます 。 

dir 属 性 は 、 下 記 の 値 に よっ て 書 字 方 向 
を 指定 し ます 。 

* ltr… 左 横書き ( 左 か ら 右 に 書き 進め る 文字 ) 
: rtL… 右 横書き ( 石 か ら 左 に 書き 進め る 文字 ) 


bdi 要 素 は 、 ふ た つの 異な る 書 字 方 向 を 
許容 する た め に 、 書 字 方 向 を 周り か ら 分 離 
させ る テキ スト の 和男 囲 を 示し ます 。 


の テキ スト の 中 に 、 ア ラビ ア 語 の よう な 右 
横書き の テキ スト が 混ざる と 、 右 に あっ た 
文字 の 並び が 右 か ら 左 に 変わ や っ て し まう こ 
と が あり ます 。 


ユー ザー jcranmer: 12 ポイ ント 
ユー ザー hober: 5 ポイ ント 


ユー ザー 3 : ssi ボ イン トー「:」 と ポイ 

ント 数 の 場所 が 変わ っ て いま す 

この 場合 、 ア ラビ ア 語 の 部 分 に bdi 要 素 
を 使う こと で 、 文 字 の 並び が 変わ る の を 防 
ぐことができます 。 


例え ば 、 日 本 語 や 英語 の よう に 左 横書き 


MMMNM 

く !DOCTYPE htmL> 

<htmt tang="]a"> 

く head> 

<meta charset="utf-8!> 
<titte> 文 字 を 書き 進め る 方 向 を コン トロ ー ル す 
る </t1tte> 

</head> 

く body> 


<p> 今 の 横文字 : ちょ っ と いい 気持 ち <br> 

<bdo dir=!rtt> 昔 の 横文字 : ちょ っ と いい 気 
持ち </bdo></p> 

<p>Water-1mp(19) gets 5 po]nts from 
<bdi>olsi</bd1>(12 ) . く </p> 

</body> 

</htmt> 


フラ ウザ 表示 


ちょ てい 0 


| bdo 
今 の 模 文 字 : ちょ っ と いい 気持 ち 
ち 持 気 い いと っ ょ ち : 字 文 横 の 昔 


Water-imp(10) gets 5 points from 。bI(12). 
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リス ト の 種類 


リス ト 表 示 は 、 リ スト の 種類 を 示す 要素 と 、 個 別 の リス ト 項 目 を 示す 子 要素 の セッ ト で 
作る こと が で きま す 。 
リス ト の 種類 を 示す 要素 は 3 つづ 用意 さ れ て いま す 。 


* 文頭 に 番号 の つく リス ト …ol 要 素 
* 文頭 に 記号 の つく リス ト …ul 要 素 
・ 用 語 と 説明 文 の リス ト …dl 要 素 


また 、ol 要 素 と ul 要素 の 子 要素 は Ii 要素 で す 。 | 

dl 要素 の 子 要素 は ふ ぬ ひ た つ あ り 、 用 語 を dt 要素 、 用 語 の 説明 文 を dd 要素 で 示し ます 。 

ol 要素 の 文頭 の 表示 方 法 は 、type 属 性 を 利用 し て 変更 で きま す 。 例え ば 「1、2、3…」 | 

と 表示 する こと も で きま すし 、「i、il、ii…| と 表示 する こと も で きま す 。 08 
ul 要素 も 文頭 の 記号 を 「 錯 ]「 〇 ]「 画 ] と 変更 で きま す が 、type 属 性 で は な く ス タイ ル シ ー 

ト を 利用 し ます 。 リ 

3 種類 の リス ト は 入れ 子 に する こと も 可能 で す 。 る 


ビビ ミ 


> で SN 


6 


及 
<!DOCTYPE htm1> [ 
<htmt tang="a"> | 四 
<head> 記 潮 滑 </head> 日 本 で 最も 高い 山 ベス ト 3 
<body> 昌 1. 富士 山 (3.776m) 
<p> 日 本 で 最も 高い 山 ベ スト 3</p> 2. 北 硬 (3.193.2m) 
は 3. 奥 駒 高岳 (3.190m) 
<ui> 富 士 山 (3,776m)</t1> 
<Ut> 北 岳 (3,193.2m) </11> 日 本 の 自然 世界 中 産 
< くい > 奥 穂高 岳 (3,199m)</11> 
< く /ol> ・ 3 
ー 際 
<p> 日 本 の 自然 世界 遺産 </p> ・ 屋久 島 ( 
<ut> |  ・ 小 笠原 諸島 | 
<Ui> 知 床 </L1> | 日 生生 の 当 
94 随所 鉱物 富山 県 部 市 宇奈月 の ジル コン 、37 仙 | 
<ti> 屋 久 島 </Li> 5000 万 年 前 上 
<Ui> 小 笠原 諸島 </Li> 
く /ut> し 
く dt> 
<dt> 日 本 最 古 の 自然 物 </dt> 
<dd> 鉱 物 - 富山 県 黒部 市 宇奈月 の ジル コン 、37 億 5990 万 年 前 </dd> 
</d1> 
</body> 
く /htmt> 


3 上 5 


H 
T 
M 
L 
リ 
フ 
P 
レ 
ン 
ス 


elewlelo#% る 
順序 な し リス ト を 表す 


く uL> 
く Li> 坦 </L1> 


く /uL> 
代 … リス ト 表 示す る テキ スト 


| 
| フロ ー コンテンツ 


0 個 以上 の | 要素 


ul 要素 は 、 順 序 が 重要 で な い 項 目 の リ 
スト を 示し ます 。 
順序 が 重要 で な い 項 目 と いう の は 、 そ の 


順序 が 変わ っ て も あま けり 文書 の 意味 が 変わ 
ら な い 項 目 で す 。 

要素 は 、ul 要 素 の 子 要素 で 、 リ スト の 
瑞 串 の 項目 を 示し ます 。 


サン プル で は 、「 次 の トラ ンプ を 引く 前 
に 銃 が 火 を 噴く ! ] 等 の 3 行 の テキ スト に 
ul 要素 と Ii 要素 の セッ ト を 指定 し て いま す 。 
その た め 、 ブ ラウ ザ で 表示 し た と き に 、 こ 
の 部 分 の 行頭 に 「・] の つい た 順序 な し リ 


スト の 表示 が され る こと が わか が り ま す 。 


く !DOCTYPE htmt> 


<htmt tang="]a"> く head> 

<meta charset="utf-8> 

<ttte> 順 序 な し リス ト を 表す </tjtte> 
EE 中 :/head> 

<body> 


<p> ク イズ 明日 は 我が身 <br> 

次 の 展開 を 想像 し な さい </p> 

く ut> 
<u> 次 の トラ ンプ を 引く 前 に 銃 が 火 を 噴く !</11> 
<ti> 部 屋 ご と 宇宙 人 に つれ さら れる </11> 
<1i> 冥 界 か ら モ ンス ター が 現れ る </11> 

</ut> 

</body> 

く </htmt> 


| クイ ズ 明 日 は 我が身 
次 の 展開 を 想像 し な さい 


| ・ 次 の トラ ンプ を 引く 前 に 銃 が 火 を 踊 く ! 
| ・ 部 屋 さ と 宇宙 人 に つれ さら れる 
| ・ 冥界 か ら モン スタ ー が 現れ る 


\ 
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2.2 


eelelelo ゃ る 
順序 付き リス ト を 表す 


< く ot> 
<li> 堪 </ > 


H 
M 
L 
リ 
フ 
ア 
レ 
ン 
ス 


く </oLl> 
ぐ … リス ト 表 示す る テキ スト 


フロ ー・ コ ン テ ン ツ 内 包 で きる も の 店 MGIDBSO】IE:E 


Ol 要 素 は 、 意 図 的 に 順序 を つけ た 項目 表示 が され る こと が わか り ま す 。 
の リス ト を 示し ます 。 

順序 を つけ た 項目 と いう の は 、 そ の 順序 
が 変わ る と 文書 の 意味 が 変わ っ て し まう 項 
、 つ まり 順序 に 意味 が ある 項目 で す 。 
li 要素 は 、ol 要 素 の 子 要素 で 、 リ スト の 
別 の 項目 を 示し ます 。 
サン プル で は 、「 追 手 の 銃 が 火 を 噴く ! 」 
等 の 3 行 の テキ スト に ol 要素 と li 要素 の 
セッ ト を 指定 し て いま す 。 その た め 、 ブ ラ 
ウザ で 表示 し た と き に 、 こ の 部 分 の 文頭 に 
「1. 2. 3.] な ど が つい た 順序 付き リス ト の 


ロ H 


く !DOCTYPE html> 
<htmt tang="]a"> 
< く head> | 
<meta charset= リ "utf-8 リ > 
<t1tte> 順 序 付き リス ト を 表す </t1tte> | 
国対 /head> 
< く body> 


<p> ク イズ 明日 は 我が身 <br> 
と の あと 起こ る こと を 時 系 列 に な ら べ な さい </p> | クイ ズ 明 日 は 我が身 


<ot> と の あと 起こ る こと を 時 系 列 に な ら べ な さい 
<ti> 追 手 の 銃 が 火 を 噴く ! </11> 0 人 
< くい > 追手 が や っ て くる </11> 1. 追手 の 銃 が 火 を 噴く ! 
<t1> 仲 間 が 涙 を の ん で 立ち 去る </11> 2. 追手 が や っ て くる 

く /o1t> ※ 涙 

昌 3. 仲間 が 涙 を の ん で 立ち 去る 


</htmt> 
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@@@@0『@ 


H 
\ 順序 付き リス ト の 文頭 の 表示 を 変え る 
ッ <ot type=" 電 "> Mi 
レ く Li> 全 </11> 
く /oL> 


人 … 1、a、A、i、1 の いずれ か 
ム … リス ト 表 示す る テキ スト 


ol 要素 の type 属 性 は 、 文 頭 の 番号 の 種 type 属 性 の 値 は CSS の list-style-type 
類 (マー カー) を 指定 し ます 。 の 値 と 対応 し て いま す 。 
type 必 性 に 指定 する 値 は 下記 の と お り サン プル で は 、「 体 が 動か な く な る 仲間 
で す 。 属 性 が 指定 され な いと き は 数 字 が た ち 」 等 の 3 行 の テキ スト に ol 要素 と li 
頭 に 表示 され ます 。 要素 の セッ ト を 指定 し 、 さ ら に ol 要素 の 
。 1… 雪 字 (1、2、 3…) type 属 人 性 に を 指定 し て いま す 。 その 
る に た め 、 ブ ラウ ザ で 表示 し た と き に 、 こ の 部 
* a… 小 文字 の アル ファ ベッ ト (a、b、c…) re 
5 分 の 文頭 に 「| Il 員 の つい た 順序 付き リ 
*・ A… 大 文字 の アル ファ ベッ ト (A、B、C…) スト の 表示 が され る こと が わか り ま す 
・ 小文字 の ロー マ 数 字 (i、i、 …) NM 所 W 
* |… 大 文字 の ロー マ 数 字 (|、 中 、 川 - う ) 


く !DOCTYPE htmt> 
<htmt tang="]a"><head> 
<meta charset="utf-8 リ > 


<titte> 妥 番 が ある リス ト の 文頭 の 表示 を 変え る | | 3 計 o 間 直 
</t1tLe> | 

攻 胃 </head> 

< く body> 


<p> ク イズ 明日 は 我が身 <br> 
この あと 起こ る こと を 時 系 列 に な ら べ な さい </p> 


<ol ii NR クイ ズ 明 日 は 我が身 
<Li> 体 が 動か な く ぐ な る 仲間 た ち </11> っ ra 
閉包 工 57 | ーー PU に な ら べ な さい 
<ui> ひ と と お り マ ジッ ク を みせ る </11> | ] 体 が 動か な く な る 仲間 た ち 
</ot> 半 本 
| IL マジ シャ ン の 背後 で 銃 が 火 を 噴く ! 
h 
MA | | ML ひと と お り マ ジッ ク を みせ る 
| 関連 
078 ら の リス トマ ー カ ー の 種類 (P.234) 


2.2 5.1 


@@@@0 す @ 


順序 付き リス ト の 最初 の 数 字 を 指定 する M 
<ot start=" 電 "> ラ 
<L1 vatue=" 全 "> 圏 </1> レ 
時 の 
@ … 束 数 
4^ … 束 教 


詳 リスト 表示 する テキ スト 


ol 要素 の start 属 性 は 、 リ スト の 最初 は 、 属 性 が 指定 され な いと き と 同 じ 数 値 が 
の 項目 の 数 値 を 示し ます 。 また 、 上 要素 の リス ト に 適用 され ます 。 
value 属 性 は 、 リ スト の 個別 の 項目 の 数 値 Ol 要 素 に start 属 性 が 指定 され て いて も 、 
を 示し ます 。 最初 の li 要素 に value 属 性 が 指定 され た 場 
start 属 性 、value 属 性 と も に 、 必 性 値 合 は 、value 属 性 の 値 が リス ト に 適用 され 
は 整数 で な けれ ば いけ ませ ん 。 小数 値 が 指 ます 。 

定 さ れ た 場合 は 、 整 数 に 直さ れ た 数 値 が リ 

ト に 適用 され ます 。 

また 、 数 値 で な い 文 字 が 指定 され た 場合 


< く !DOCTYPE htmt> 

<htmt tang=!"]a!><head> 

<meta charset=!'utf-8 リ > 

<titte> 順 番 が ある リス ト の 最初 の 数 字 を 指定 する </ttte> 


EE 泊 : 放 /head> 
<body> 


<p> ク イズ 明日 は 我が身 <br> 
剣 が 4 本 刺さ っ た 状態 か ら ど うな る か 想像 し な さい </p> 
く ot start= り 4 リ > 
<i> ま だ 希望 を 持っ て いる </11> 
< い > 娘 と 奥さん を 思い 浮か べ る </11> 
<1i> 仲 間 の 銃 が 火 を 噴く ! </ti> 
</ot> 
及 W クイ ズ 明 日 は 我が身 
剣 が 4 本 刺さ っ た 状態 か ら ど うな る か 想像 し な さい 


4. まだ 希望 を 持っ て いる 
5. 娘 と 奥さん を 思い 浮か べ る 
6. 仲間 の 銃 が 火 を 噴く ! 


079 


4.1 60 


-]@iel@elO#@ 


* 
w 文頭 の 番号 が 降順 の リス ト を 作る 
ラ 」 Xe FeVverSed> 昌和 
し < い > 氏 </11> 
ン 2 
ス 

く /oL> 


草 … リス ト 表 示す る テキ スト 


ol 要素 の reversed 属 性 は 、 番 号 順 リ ス 国 へ 」 等 の 3 行 の テキ スト に ol 要素 と Ii 
ト の 番号 を 降順 に 変更 し ます 。 この 属性 が 要素 の セッ ト を 指定 し 、 さ ら に ol 要素 に 
な い 場 合 は 、 番 号 は 昇順 に な り ま す 。 reversed 属 性 を 指定 し て いま す 。 その た 

start 属 性 が 指定 され て いな い 場 合 、 リ ゆめ 、 ブ ラウ ザ で 表示 し た と き に 、 こ の 部 分 
スト の 一 番 最 後 の 番 号 は 「1] と な り 、 リ の 文頭 に 「3 2 1] の つい た 順序 付き リス 

ト の 一 番 最初 まで 1 ずつ 番号 が 加算 され ト の 表示 が され る こと が わか り ま す 。 

て いき ます 。 

start 属 性 が 指定 され て いる 場合 、 リ スズ 
ト の 一 番 最初 の 番号 が start 属 性 で 指定 さ 
れ て いる 番号 と な り 、 リ スト の 一 番 最 後 ま 
で 1 ずつ 減算 され て いま す 。 

サン プル で は 、「 天 使 が 現れ て 一 緒 に 天 


く !DOCTYPE html> 
<htmt tang="]a リ > 

く head> 
< く meta charset="utf-8> 
<titte> 文 頭 の 番号 が 降順 の リス ト を 作る </titte> 
放 員 : 計 /head> 
< く body> 


中 星 」 
<p> ク イズ 明日 は 我が身 <br> 
次 の 展開 を 想像 し な さい </p> 
く ot reversed> 

< いい > 天 使 が 現れ で 一 緒 に 天国 へ </\1> クイ ズ 明 日 は 我が身 


<ti> 宇 宙 人 と 一 緒 に 宇宙 船 べ </L1> 次 の 展開 を 想像 し な さい 
<Ui> 背 後に シリ アル キラ ー が !</11> 
</o1> 3. 天使 が 現れ て 一 緒 に 天国 へ 
</body> 2. 宇宙 入 と 一 緒 に 宇宙 船 へ 
</htm1> | 1. 背後 に シリ アル キラ ー が ! 
MS ーー 
080 


5.1 


@@@@0O 


H 
名 前 と 値 の 関連 付け の リス ト を 表す N 
リ 
紀 
< く dL> 人 
<dt> 坦 </dt> テ 
<dd> 全 </dd> 
く /dL> 
人 @ … 説明 され る テキ スト 
人 ^ … 説明 文 


dl: フ ロー・ コ ン テ ン ツ dl : ひと つ 以 上 の dt 要素 と ひと つ 以 上 の dd 要素 の セッ ト が 0 個 以上 
dt : な し dt : フ ロー・ コ ン テ ン ツ (た だ し header 要素 、footer 要素 、 セ クシ ョ 
dd: な し ニン グ ・ コ ン テ ン ツ 、 ヘ ッ デ ィング ・ コ ン テ ン ツ は 子孫 に 稿 め な い ) 
dd : フロ ー・ コ ン テ ン ツ 


dl 要素 は 、「 名 前 ]」 と 「 値 |] の グル ー プ 


作ら れる 関連 5 ・ 用 語 と その 定義 
で 作ら れる 剛 電 は け の リス ト (8 明 リスト) Te ニー 
字 和 と 「 値 | の ループ は dt 要素 が と 
に 9 と 系 必 aco 困 ・ _ 
ひと つつ 以上 と 、 そ の 後に dd 要素 が ひと つ 5 「 名 前 」 と 「 値 ] と し て 扱え る 


以上 ある 状態 で 作ら れ ま す 。 つ まり 、 グ ルー 
プ の 状態 は 1 対 1 で も 、2 対 1 で も 、1 対 な お 、「 名 前 ] = 人 の 名 前 、「 値 ] = 話す 


2 で も 、2 対 2 で も あり えま す 。 内 容 と し て 、 対 話 を 示す の に は gl 要素 は 
この グル ー プ と し て マー クア ッ プ で きる 不適 切 で す 。 対話 に は p 要 素 を 使用 する の 
の は 以下 の も の が 考え られ ます 。 が 適切 で す 。 


! > 
<htmt tang="a"> 
く head> 
< く meta charset=Wutf-8!> 
<tjtte> 名 前 と 値 の 関連 付け の リス ト を 表す </ttte> | 
く /head> 
< く body> 
<dt> 
<dt> ク イズ 明日 は 我が身 </dt> 
<dd> 登 場 人 物 の セリ フ を 元 に 死亡 フラ グ が た っ た か | クイ ズ 明 日 は 我が身 
どう が を 楽し な クイズ </dd> 登場 人 物 の セリ フ を 元 に 死 エ 上 フラ グ が た っ た か 
</d1> | どう か を 楽し お む お クイズ 
く /body> 
</htmt> ] 


ト 
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表 組 を 作る 要素 の セッ ト 


表 組 の 表示 は 、 下 記 の 要素 の セッ ト で 作る こと が で きま す 。 . 


・ 表 組 を 示す 要素 :…table 要素 は 、 表 組 を 示し ます 。 ひと つ ひ と つの テー ブル を 区 切る こ 


と が で きま す 。 
・ 行 を 示す 要素 tr 要素 は 表 組 内 の 行 ( 縦 の 並び ) を 示し ます 。tr 要 素 を 増やせ ば 行 が 増 
えま す 。 


: デー タ セ ル を 示す 要素 .…th 要 素 、td 要素 は 、 表 組 の セル ( 材 目 ) を 示し ます 。 これら 
の 要素 は tr 要素 の 中 に 入り ます 。 th 要素 は 後に 続く デー タ の 項目 名 、td 要 素 は デー タ 
本 体 を 入れ る の に 使い ます 。 

・ テー ブル の 説明 を 示す 要素 caption 要 素 は 、 テ ー ブ ル の 説明 を 示し ます 。table 要 素 
の 最初 の 子 要素 と し て 入れ る こと が で きま す 。 

*・ 行 の まとまり を 示す 要素 th 要素 と td 要素 を まとめ る tr 要素 が ある よう に 、tr 要 素 を 
まとめ る 要素 が 3 つ あ り ま す 。 

thead 要 素 は 項目 名 、tfoot 要 素 は 列 の 要約 (合計 な ど )、tbody 要素 は デー タ 本 体 
を 示し ます 。 tfoot 要 素 は 、HTML 上 で は thead 要 素 と tDody 要 素 の 間 に 記述 し ます が 、 
ブラ ウザ 上 で は tbody 要素 の 下 に 表示 され ます 。 

・ 列 の まとまり を 示す 要素 . セル を 行 と し て まとめ る T「 要 素 が ある よう に 、 セ ル を 列 と 
し て まとめ る に は colgroup 要 素 が 利用 で きま す 。 

CO 要素 は 、colgroup 要 素 が 複数 の 列 を まとめ か て いる と き に 、 ひ と つ ひ と つの 列 を 
示す 9 要素 と し て 、colgroup 要 素 の 中 で 利用 で きま す 。 

col 要素 、Colgroup 要 素 は 、table 要 素 の 子 要素 と し て 、caption 要 素 と thead 要 
素 /tfoot 要 素 /tDody 要素 の 間 に 入 れる こと が で きま す 。 


| サウ フル ソー エス 
<tabte border=!1 リ > 
<caption> 総 人 口 の 推移 </capton> 
く thead> 
<tr><th> 年 次 </th><th> 総 人 口 <br>10 月 1 日 現在 <br> 人 口 ( 千 人 )</th></tr> 
く /thead> 
く tfoot> 
<tr><td> 平 成 21 年 の 前 年 比 増減 数 </td><td>-183</td></tr> 
く / て foot> = ーー 
<tbody> 3 
<tr><td> 平 成 26 年 </td><td>127、692</td></tr> | 


<tr><td> 平 成 21 年 </td><td>127,519</td></tr> | | | 生 人 ロ 
</tbody> | | 年 次 10 月 1 日 現在 
ab1e> | | 入口 守 人 ) | 

] 還 成 20 年 127.692 

| 較 

] 2 年 Ne7s0 | 
平成 21 年 の 前 年 比 場 減 


2.2 1 5.1 
H 
表 組 の 境 界 線 を 表示 する M 
リ 
問 3 | 3 
に 4| <tabte border=" 但 "> HTML5 更新 レ 
< く tr>< く て d> 含 く /td> く / て F> 6 3 ス 
く / て abLte> 
信 1 も し く は 空 
人 る … 表 の デー タ 
剖 


table 要 素 の border 属 性 は 、 セ ル に 境 
界 線 を 表示 し ます が 、 基 本 的 に は 境界 線 は 
CSS で 表示 する と され て いま す 。 

その た め 、border 属 性 は 「table 要 素 
を レイ アウ ト 目 的 で 使用 し て いな いこ と を 
明確 に 示す た め に 指定 可能 ] と され まし た 。 
属性 値 は 「1」 か 空 の み 入 れる こと が で き 
ます 。 
サン プル で は 、table 要 素 の border 属 
陸 に 「1」 を 指定 し て いま す 。 そ の た め 、 
ブラ ウザ で 表示 し た と き に 、 表 組 の 各 セ ル 


の 示さ れる こと が DD ます 。 


湊 ツ プル ツー 
<!DOCTYPE htmLu> 
SN 旧 本 | ウン プ 、 ダン フカ ー、 ダ ンプ トラ ッ ク | 
く head> | 
<meta charset="utf-8 リ > | アメ リカ dump Truck 
<titte> 表 組 の 境界 線 を 指定 する </titte> | イキ リス ipper ruck 
EL:/head> ま こ 
<body> 
Pe 
<tabte border="1"> 
<tr> く td> 日 本 </td><td>z ダ ンプ 、 ダ ンプ カー、 ダ ンプ トラ ッ ク </td></tr> 
<tr><td> ア メリ カ </td>< て d>dump 。 モ ruck く / て d> く / て > 
<tr><td> イ ギリ ス </td><td> て ipper。 truck</ モ d> く / モ F> 

</ て abte> 

</body> 

</htmt> 
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H 
T 
M 
L 
リ 
フ 
ア 
避 
ン 
ス 


S@@@0 科 @ 


構 
ssa| く tabte> 


| </tabte> 


⑯ … ヘッ ダ セ ル の id 属性 値 
^ … 表 の デー タ 


. 乾 計器 司 有 セク ショ ニン グ ・ ル ー ト 


<tr><td headers=" 坦 "> 全く </td></ て r> 


表 組 の デー タ セ ル を 作る 


に %Gcoki の 蘭 フロ ー・ コ ン テ ン ツ 


td 要素 は 、 表 組 の デー タ セ ル を 示し ま 
す 。 

headers 属 性 は 、 関 連 の ある th 要素 の 
id 属性 値 を 指定 し ます 。 

行方 向 、 列 方 向 そ れ ぞ れ の th 要素 の id 
属性 値 を 指定 する 等 、 複 数 の id 属性 値 を 


で きま す 。 

サン ブ プル で は 、「 日 本 」 「 シ ョ ベル カー」 
等 の テキ スト に td 要素 を 指定 し 、 さ ら に 
td 要素 の headers 属 性 に 「th_1」 [th_2] 
を 指定 し て いま す 。 そ の た め 、 こ の 部 分 
が セル の id 属性 値 と し て [th_1」 「th_2] 


指定 する 場合 、 半 朋 ス ペー ス で 区 切っ て 指 
定 し ます 。 

headers 属 性 を 使用 する と 、 音 声 で 情 
報 を 取得 し て いる ユー ザー な ど 、 表 組 を 一 
覧 で き な い ユー ザー に 対し て 、 デ ー タ セル 
と ヘッ ダ セ ル の 関連 付け を 知ら せる こと が 


を 持っ て いる 「 国 ] 「 呼 び 名 ] に 関連 付け 
られ て いる こと が わか り ま す 。 


し せ ぐ る か ー? 


サジ フル ツ ャ ロス 
<!DOCTYPE htmt> 


<htmt tang="]a"><head> 
<meta charset="utf-8 リ > 


EK/head> 
く body> 


く tabte border="1 リ > 
び 名 </th></tr> 
</t て abte> 


< く /body> 
</htmLt> 


<titte> 表 組 の 縦横 に 並ぶ 材 目 (セル ) を 作る </ttte> 


<trz<th id="th_1"> 国 </th> く th 1d="th_2"> 還 


く <tr><td headers="th_1"> 日 本 </td><td headers="th_2"> シ ョ ベル カー</td></tr> 
<tr>< く td headers="th_1"> 英 語 園 </td><td headers=" て th_2">excavator く / モ d> く /r> 
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aele elo る | 
表 組 の ヘッ ダ セ ル を 作る 


| <tabte> 
| に <tr><th headers=" 坦 " abbr=" 人 "> 圏 </th></tr> 


較 </tabLe> OO 


全 … 田 を 省略 し た 内 容 
圏 … 表 の ヘッ ダ 


H 
M 
L 
り 
フ 
ア 
レ 
ン 
ス 


な し 細 SR ま 和光 フロ ー・ コ ン テ ン ツ (header 要素 、footer 要素 、 セ クシ ョ ニン グ ・ コ ン テ ン ツ 、 
ヘッ ディ ング ・ コ ン テ ン ツ を 子孫 に 含め な い ) 


th 要素 は 、 表 組 の ヘッ ダ セ ル を 示し ま _ せる こと が で きま す 。 
計 。 サン プル で は 、「 調 査 対象 の 国 ] 「 各 国 で 
headers 属 性 は 、 関 連 の ある ヘッ ダ セ の 呼び 名 ] 等 の テキ スト に th 要素 を 指定 
ル の id 属性 値 を 指定 し ます 。 複 数 の id 属 し 、 さ ら に th 要素 の abbr 属 性 に 「 国 ] [ 呼 
性 値 を 指定 する 場合 、 半 角 ス ペー ス で 区 び 名 | を 指定 し て いま す 。 その た め 、 この 
切っ て 指定 し ます 。 部 分 の 省略 し た 内 容 が 「 国 ] 「 呼 び 名 ] で 
abbr 属 性 は 、th 要 素 の 内 容 が 長い 場合 ある こと が わか り ま す 。 
に 省略 し た 内 容 を 記述 し ます 。 


headers 属 性 や abbr 属 性 を 使用 する 


と 、 音 声 で 情報 を 取得 し て いる ユー ザー な 
ど 、 表 組 を 一 覧 で びき ない ユー ザー に 対し て 、 
デー タ セ ル と ヘッ ダ セ ル の 関連 付け を 知ら 


My MP74D] の の 74 

< く !DOCTYPE htmt> 上 
<htmt Lang="]a!"><head> 
< く meta charset="!utf-8 リ > 間 査 対象 の 国 | 各国 で の 呼び 名 
<titte> 表 組 で ヘッ ダ 項 目 用 の 村 目 (セル ) を 作る </ 日 本 | トラ クタ ー 
t1tLe> の = 
EEEH</head> 英語 圏 ractor 
< く body> 
<tabte border=W1"> 

<tr><th 1d=th_1" abbr=『 国 > 調査 対象 の 国 </th><th id="th_2" abbr=! 呼 び 名 "> 各国 で の 呼 
び 名 </th></tr> 

<tr>< く td headers="th_1"> 日 本 </td><td headers="th_2"> ト ラク ター</td> く </tr> 

<tr><td headers="th_1"> 英 語 園 </td><td headers="th_2">tractor</td> く /tr> 
</tabte> 
</body> 
</htmt> 
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7 


ま 221 51 


ま 上 上 
上 1 そ を を 
|⑯W@|0j 生 の 


wasn mm 


表 組 に タイ トル を つけ る 


| < て abte> 
<caption> 堪 </capt1on> 
< く tr> く td> 全く /td> く / モ > 
く /tabLe> 
借 … 表 の タイ トル 
人 A … 表 の デー タ 
し カテ コリ ー 3 


HTML5 変更 


な EKS た る コツ 借 フロ ー・ コ ン テ ン ツ (tablg 要素 を 子孫 に 宮 め な い ) 


Eo 


し ます 。 
Caption 要 素 が ある と 、 表 組 の 内 容 は 
か な り 理 解 し や すく な り ま す 。 


figure 要素 内 に table 要素 だ けが ある 場 
合 、table 要 素 の タイ トル は caption 要 
素 で は な く 、figcaption 要 素 を 使用 する 
の が 適切 で す 。 

サン プル で は 、「 国 ご と の 呼び 名 」 と い 
う テ キス ト に caption 要 素 を 指定 し て い 
ます 。 その た め 、 ブ ラウ ザ で 表示 し た と き 
こ 、 表 組 す ぐ そ ば に この テキ スト が 表示 さ 


caption 要 素 は 、 表 組 の タイ トル を 示 れる こと が わか が り ま す 。 


サウ ワル ソー スズ 
く !DOCTYPE htmt> 
<htmt tang=!"]a"> 
<head> 
<meta charset=!Wutf-8 リ "> 
<titte> 表 組 に キャ プシ ョ ン を つけ る </titLe> 
民 還 : 計 /head> 
<body> 
<tabte border= リ "1"> 
<caption> 国 ご と の 呼び 名 </captton> 
<tr> く th> 国 </th><th> 呼 び 名 </th></ て r> 
<tr> く td> 日 本 </td><td> ト レー ラー</ て d></ て r> 
<tr><td> 英 語 団 </td> <td> モ ra1Ler く / モ d> く / て r> 
</tabLe> 
</body> 
</htmt> 
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表 組 を 読み 上 げ 環境 軸 で も 利用 可能 に する 


本 <tabte> 
| <tr><th scope=" 夫 "> 全く </th><td> 圏 </td></tr> 
| </tabte> 
| @ … ヘッ タダ と し て 影響 の ある 方 向 (row、 col、 rowgroup、 ColgrOuD の いずれ か ) 
・ 表 の ヘッ ダ / 圏 … 表 の デー タ 


イン ター ネッ ト は テキ スト だ け で な く 、 音 声 や 画像 、 動 画 を 扱う こと が で きま す 。 
し が し 、 中 に は 音声 ブラ ウザ や スク リー ン リ ー ダ ー な どの 支援 技術 を 利用 し て 、 テ キス 
ト 読 み 上 げに よっ て 情報 を 取得 し て いる ユー ザー も いま す 。 
これ ら の ユー ザー は 、 表 組 の 情報 を 取得 する と き 、 た え ず 縦横 の ヘッ ダ 情 報 を 意識 す 
る 必要 が あり 、 内 容 を 理解 する の が 難し く な り ます 。 
その た め 、 表 組 の 情報 を 理解 し や すく する 属性 が 、 表 組 関連 の 要素 に に 準備 され て いま す 。 


headers 属 性 … こ の 属性 を 指定 し た デー タ セ ル や ヘッ ダ セ ル と 関連 の ある ヘッ ダ セ ル 
の id 属性 値 を 示し ます 。 半角 スペ ー ス で 区 切っ て 、 複 数 の id 属性 値 を 指定 で きま す 。 
td 要素 、th 要 素 で 利用 可能 。 

SCOpe 属性 … ヘ ッ ダ セル が 、 ど の 方 向 の 


デー タ に 対し て の ヘッ ダ で ある か を 示し ま | 


す 。 属性 価 に は 、 下 記 の 4 つの キー ワー ド Se ne 


の いずれ か を 指定 し ます 。 th 要素 で 利用 | <htmt 1ang='a"> 
可能 | <head>E 滞 人 /head> 
0 | <body> 
| <tabte border="19> 
- row・・ 模 方向 (行方 向 ) の デー タ の ヘッ ダ <thea> 


に 軸 ] <tr><th> 計 測 値 </th><th> 平 均 値 </th> 
: coL… 縦 方 向 ( 列 方 向 ) の デー タ の ヘッ ダ | <th> 最 大 値 </th></tr> 


| 
・ rowgroup… 残 りす べ て の 横 方 向 ( 行 | Rieerd 
8 ] Ody 
方 向 ) の まとまり の ヘッ ダ (thead、 | <tr><th scope="rowgroup"> 柴 犬 </ 
tfoot、 tbody 要 素 に 対応 ) て h> <td></ て d>< く td> く / て d> く /tr> 
<tr><th scope="row'> 好 き 度 </th> 


* colgroup… 残 りす べ て の 縦 方 向 ( 列 方 向 ) | 上 』。7.9。/t>ctd19</td></tr> 


の まとまり の ヘッ ダ (colgroup 要 素 に </tbody> 
<tbody> 


対応 ) <tr><th scope="rowgroup"> チ ワ ワ </ 
て h><td> く / て d> く モ td> く / て d> く / モ > 
63 に 2 <tr><th scope="row"> 好 き 度 </th> 
これ ら の 属性 を 指定 する と 、 支 援 技 術 の <td>7.7</td> く td>10 く /td></tr> 
設定 に よっ て は 、 デ ー タ と と も に ヘッ ダ も | tbodw 
ニ さ - db tG. 
得 ら れる た め 、 情 報 が 理解 し や すく な り ま |。/bogy> 
回 | </htmt> 
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geeeo ぁ 
表 組 の 縦 方 向 の セル を 結合 する 


構 
sy く tabLe> 
<tr><td rowspan=" 二 "> 全く </td> く td> 全く /td> く /tr> 
く /tabLe> 


⑱ … 縦 に 連結 する セル の 数 
^ … 表 の デー タ 


rowsDan 属 性 が 指定 され た セル は 、 旬 ラウ ザ で 表示 し た と き に 、 こ の 部 分 が 縦 方 
で 指定 し た 数 の 行 ( 縦 方 向 の セル ) に また 向 の ふた つの セル を 結合 し て 表示 され る こ 
が っ た デー タ で ある こと を 示し ます 。 と が わか り ま す 。 

ひと つの デー タ を 複数 の 行 で 利用 で きる 
た め 、HTML の 記述 を 減ら すこ と が で き 
ます 。 

し か し 、colspan 属 性 と あわ せ て 利用 
する と 複雑 な 表 組 に な り ま すし 、 テ キス ト 
読み 上 げ ツ ー ル で 情報 を 取得 する ユー ザ 
に と っ て も 理解 し に くい 表 組 と な る の で 、 
過度 な 使用 に は 気 を つけ まし よう 。 

サン プル で は 、「 英 語 圏 | と いう テキ ス 画 | 呼び 名 | 


ブラ ウザ 表示 


バト し が か ーッ 


ト が 入っ て いる td 要素 の rowspan 属 性 = 
パト カー 
を 「2] に 指定 し て いま す 。 その た め 、 ブ 旧 本 パト か -| 
Ipolice 


て 

サン フル ソー ス 生 束 韻 ーー 
く !DOCTYPE html> 
<htmLt ・ tang="a"> 
く <head> AN 
< く meta charset="utf-8 リ > 
<titte> 表 組 で 複数 の 材 目 ( セ ル ) を 縦 方 向 に 連結 する </ て 1tLe> 
Eh:</head> 
<body> 
<tabte border="1"> 

<tr><th> 国 </th><th> 呼 び 名 </th></tr> 

<tr> く td> 日 本 </td> く <td> パ トカ ー</td></tr> 

<tr><td rowspan="2"> 英 語 圏 </td><td>poLice</td> く /tr> 

<tr><td>car く / モ td> く /tr> 
</tabLe> 
</body></htmt> 
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6| @ @ @ olW@ 
表 組 の 横 方 向 の セル を 結合 する 


和紀 <tabLe> 

< て tr> く td NilellelrMil 
| </ て tabte> ② 
介 … 横 に 連結 する セル の 数 HTML5 変更 
4. 表 の デー タ colspan: 0 より 2 


H 
T 
M 
L 
リ 
フ 
ア 
レ 
ン 
ス 


Colspan 属 性 は 、 氏 で 指定 し た 数 の 列 その た め 、 ブ ラウ ザ で 表示 し た と き に 、 こ 
( 横 方 向 の セル ) に また が っ た デー タ で あ の 部 分 が 横 方 向 の ぶた つの セル を 結合 し て 
る こと を 示し ます 。 表示 され る こと が わか り ま す 。 

ひと つの デー タ を 複数 の 列 で 利用 で きる 
た め 、HTML の 記述 を 減ら すこ と が で き 


ます 。 

し か し 、rowspan 属 性 と あわ せ て 利用 
する と 複 准 な 表 骨 に な り ま すし 、 テキ スト 
読み 上 げ ツ ー ル で 情報 を 取得 する ユー ザー +4+4 じ や に 
に と っ て も 理解 し に くい 表 組 と な る の で 、 
過度 な 使用 に は 気 を つけ まし よう 。 

サン プル で は 、「 国 に よる 救急 車 の 呼び 


名 ] と いう テキ スト が 入っ て いる th 要素 
の colspan 属 性 を 「2」 に 指定 し て いま す 。 | | 男 に よる 教 急 車 の 呼び 名 


M 以 認 洲 沈 

く !DOCTYPE html> 到 

HHRENSR 耳 ambulance 

く <head> 

< く meta charset= リ "utfー8 リ > 
<titte> 表 組 で 複数 の 材 目 (セル ) を 横 方 向 に 連結 する </tttte> 


民 還 : 衣 /head> 
<body> 


<tabte border="1"> 
<tr><th cotspan="2"> 国 に よる 救急 事 の 呼び 名 く </th></tr> 
<tr> く td> 日 本 </td><td> 救急 車 く </td></tr> 
<tr><td> 英 語 圏 </td><td>ambuLance</td> く /tr> 

< く /tabte> 8 

</body> 

</htmt> 
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に 1 を 
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昌 H 
T 3 レー 
) 家 組 の 横 列 を 3 グル ー プ に まとめ る 
1 
ラ | < て tabte> 
レ に 國 <thead> 念 </thead> 
ス <tfoot> 全 < く / て tfoot> 

< て tbody> 圏 </tbody> 

く </ て abte> 


人 @ 項目 名 と な る Tr 要素 ・th 要 素 ・td 要 素 
合 … 表 組 の 要約 と な る tr 要素 ・th 要 素 ・ td 要素 
詳 … 表 の デー タ と な る Tr 要素 ・th 要 素 ・td 要 素 


な し 内 包 で きる も の 店 MEIMSOiE 


thead 要 素 は 表 組 の 項目 名 と な る 行 の また 、 列 の ヘッ ダ セ ル と 行 の ヘッ ダ セ ) 
グル ー プ 、tfoot 要 素 は 表 組 の 要約 (数 値 を スタ イル シー ト で 装飾 し や すく な り ま 
デー タ の 合計 な ど ) と な る 行 の グル ー プ 、 す 。 
tbody 要 素 は 表 組 の デー タ 本 体 と な る 行 サン プル で は 、「 種 別 ] と いう テキ スト 
の グル ー プ を 示し ます 。 の ある 行 を thead 要 素 に 、「 総 出 火 件 数 」 
tfoot 要 素 は 、thead 要 素 と tbody 要 と いう テキ スト の ある 行 を tfoot 要 素 に 、 
素 の 間 に 記 述 し ます が 、 ブ ラウ ザ で は それ 以外 の 行 を tbody 要 素 に 指定 し て い 


tbody 要素 の 下 に 表示 され ます 。 ます 。 
行 の グル ー プ を 作る これ ら の 要素 を 使用 EE 
する こと で 、 適 切な 意味 を つけ る こと も で ブラ ウザ 表示 


きま す 。 | 上 忠 まあ で や ん 


ウフ ルソー スズ 
く !DOCTYPE htmt> 
く htmt tang="]a"><head> 
< く <meta charset= リ "utf-8 リ > 
<titte> 表 組 を ヘッ ダ 、 ボ ディ 、 フ ッ タ に 
グル ー プ 分 け す る </titte> 攻 呈 当 </head> 
<body> 葉 店 <tabte border="1"> 
<thead> 
<tr><th> 種 別 </th><th> 件 数 </th></ て r> 
く /thead> 
< く tfoot> 
<tr><td> 総 出火 件 数 </td><td>10 件 </td> く </tr> 
く /tfoot> 
<tbody> 
<tr>< せ d> 建 物 火災 </td><td>4 く </ て d>< く /r> 
<tr>< て d> 車 両 火 災 </td><td>1 く / モ d> く / モ r> 
<tr><td> そ の 他 </td> く td>5 く </ モ td> く / て r> 
< く /tbody> 
</tabte></body></htmt> 


tfoot 
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2.2 .1 


る |l@lelelol# る 


H 
表 組 の 縦列 を まとめ る V 
リ 
<tabte> ラ 
斑 <coLgroup span=" 堪 " ウ レ 
| <coL span=" 全 "> ス 
< く /coLgroup> 
く て tr> 
<td> 圏 </td> 
</tr> 殺人 る … グル ー プ 化す る 列 数 
</tabte> 圏 …… 表 の デー タ 
【 カテ ゴリ ー ) ・COIgroup 要素 な し [ 内 包 で きる も の 】 ・COIgrup 要素 
隊 HEDLEITDHT 還 
・CQOI 


Colgroup 要 素 は 、 表 組 の 1 列 以上 の 列 col 要 素 は 使用 で きま せん 。 
グル ー プ を 示し ます 。 


col 要素 は 、colgroup 要 素 が 作る 列 グ 
ルー プ 内 の ひと O 以 上 の 列 を 示し ます 。 SE 
span 属 性 は 、 グ ルー プ 化 する 列 数 を 0 | 人 を 人生 い ホ ん 
より 大 きい 整数 で 指定 し ます 。 | に 
Colgroup 要 素 に span 属 性 が 指定 され 
て いる 場合 、 そ の colgroup 要 素 の 中 で 


サシ フル ソス 


<!DOCTYPE html> 国 | 呼び 名 | 
<htmt tang="]a"><head> ] ー = 
| 除雪 車 | 還 か き 車 
里 


<meta charset="utf-8 リ > | | 
較 plow ISnow plow 


日 
<titte> 表 組 の 縦列 の 内 容 を グル ー プ 分 け す る </titte> | 医 
EK/head> | 
く body> 
<tabte border="1 リ > | 
<coLgroup> く /coLgroup> ) 
く coUgroup Span="2"></cotgroup> 
<tr><th> 国 </th><th couspan="2"> 呼 び 名 </th></tr> 
<tr><td> 日 本 </td><td> 除 雪 車 </td><td> 雪 か き 事 </td></tr> | 
<tr><td> 英 語 圏 く </td><td>pLow</td><td> snow pLow</ モ d>< く / て r> | 
</tabte> 
</body> 
</htm1> 
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る @e@0% る 
リン ク を 表す 


| < く a href=" 電 "> 全 </a> 
@ リン ク 先 URL 


フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 


ム テキ スト 、 イ ンタ ラク ティ ブ ・ コ ン テ ン ツ 以 外 の 要素 


HTML5 変更 


な に KEI の 剛 透過 (イン タラ クティ ブ ・ コ ン テ ン ツ を 


(フレ ー ジ ング ・ コ ン テ ン ツ だ け を 含ん で いる と き ) 、 子孫 に 含め な い ) 
イン タラ クティ ブ ・ コ ン テ ン ツ 
a 要 素 に href 属 性 が 指定 され て いる と と は で きま せん 。 


き 、a 要 素 は ハイ パー リン ク を 示し ます 。 
八 イ パー リン ク は 、Web ペ ー ジ 、 メ ー 

ル ア ド レス 、 ダ ウン ロー ド フ ァイル な ど 、 

他 の リソー ス へ の リン ク で す 。 
HTML5 で は 、 a 要 素 の 中 に p 要 素 や 


例え ば 、 フ ォ ー ム 関係 の 要素 や 再生 ボタ 
ン が 表示 され て いる video 要 素 や audio 
要素 は 、a 要 素 の 中 に 入れ る こと は で きま 
せん 。 

サン プル で は 、「 天 然 水 の 検索 結果 」 と 


div 要 素 な ど 、HTML4 で ブロ ッ ク 要 素 と 
言わ れ て いた 要素 を 入れ る こと が で きま 
す 。 

た だ し 、a 要 素 と 同様 に 、 ユー ザー か ら 
アク ショ ン を 受け 付け る イン タラ クティ 
ブ ・ コ ン テ ン ツ は 、a 要 素 の 中 に 入れ る こ 


く !DOCTYPE htmt> 

<htmt tang="]a"> 

<head> 

<meta charset="Wutf-8> 
<titte> リ ンク を 表す </titte> 
</head> 

<body> 

人 
<p><a href="http://goo.gL/yLU1nz"> 天 然 
水 の 検索 結果 </az く </p> 

</body> 

</htmL> 


いう テキ スト に ga 要 素 を 指定 し て いま す 。 
その た め 、 ブ ラウ ザ で 表示 し た と き に 、 こ 
の 部 分 が 表 文 字 に な り 下線 が 表示 され 、 リ 
ンク テキ スト に な っ て いる こと が わか がり ま 
す 。 


プラ ウザ 表示 


オウ サー 
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@@lee@0O# ぁ 


リン ク 先 の 表示 ウイ ンド ウ を 指定 する 


構 
yl <a href=" 坦 "target="A"> 較 </a> 
岬 | ⑱ リン ク 先 URL 
今 … 任意 の 名 前 
還 … テキ スト 、 イ ンタ ラク ティ ブ ・ コ ン テ ン ツ 以 外 の 要素 


target 属 性 は 、 リ ンク 先 の 内 容 を 表示 teal」 を 指定 し て いま す 。 その た め 、 ブ ラ 


する 場所 を 示し ます 。 ウザ で 表示 し て 、 ど ちら の テキ スト を ク 
属性 値 に は 任意 の 名 前 を 指定 し ます 。 リッ ク し た と きも 、 最 初 は 別 ウ イン ドウ で 


合 は 、 そ の ウイ ンド ウ 内 に リン ク 先 を 表示 ジ が 表示 され る こと が わか り ま す 。 
し ます 。 


先 を 表示 し ます 。 ぶっ ちゃ た の 

サン プル で は 、「 緑 茶 の 検索 結果 ]「 日 本 人 4 
茶 の 検 索 結果 」 と いう テキ スト の どちら に 
も a 要 素 の target 属 性 値 と し て 「green_ 


<!DOCTYPE htmt> 
oe 緑茶 検索 結果 
く <head> 

<meta charset=!utf プ -8 リ > 
<titte> リ ンク 先 の 表示 ウイ ンド ウ を 指定 する </t1tLe> 日 本 茶 の 検索 結果 
</head> 
< く body> ト 


呈 定 し た 名 前 の ウイ ンド ウ が 存在 する 場 開き 、2 回 目 以降 は 同じ ウイ ンド ウ で ペー 


場合 は 、 新 し い ウ イン ドウ を 開い て リン ク 


<p><a href="http://goo.gt/]bdsw5!' target="green_tea"> 緑 茶 の 検索 結果 </a></p> 
<p><a href="http://goo.gL/o23LVo" target="green_tea"> 日 本 茶 の 検索 結果 </a></p> 
</htmt> 
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日 
M 
L 
リ 
フ 
PA 
レ 
ン 
ス 


H 
T 
M 
L 
リ 
フ 
アア 
レ 
ン 
ス 


@l@lel@O WW る 


リン ク 先 を 新しい ウイ ンド ウ で 開く 


構 


に | <a href=" 倫 " target=" 人 "> 較 </a> 


但 ・ リン ク 先 URL 
全 … _blank 


画 … テキ スト 、 イ ンタ ラク ティ ブ ・ 


コン テン ツ 以 外 の 要素 


target 属 性 は 、 リ ンク 先 の 内 容 を 表示 
する 場所 を 示し ます 。 例え ば _blank を 指 
定 すれ ば 、 リ ンク 先 を 新しい ウイ ンド ウ で 
表示 で きま す 。 

属性 値 に は 任意 の 名 前 を 指定 で きる 他 、 
ド 記 の キー ワー ド を 指定 で きま す 。 


・ _bLank… 新 し く ウ イン ドウ を 開い て 表示 

s _setf… 同 じ ウ イン ドウ 内 で 表示 

・ _parent… 親 ウイ ンド ウ で 表示 

: __top… 一 番 上 の レベ ル の ウイ ンド ウ で 
表示 


_parent と _top の 違 い は 、_parent 
が ひと つ 上 の 親 で 表示 する の に 対し て 、_ 
top は 親 の 入れ 子 が いく つ あ っ て も 一 番 上 
の 親 の ウイ ンド ウ で 表示 する こと で す 。 

例え ば 、 iframe 要 素 が 上 ふた つ 入 れ 子 
に な っ て いる と き で も 、_top の 場合 は 
iframe を な くし て リン ク 先 の 内 容 を 表 
示し ます 。 _parent の 場合 は ひと つ 上 の 
iframe 要 素 の 中 に 表示 し ます 。 


サン ウル ソ スズ 
く !DOCTYPE htmt> 
<htmL tang="]a"> 
<head> 
<meta charset="utf-8"> 
<titte> リ ンク 先 を 新しい ウイ ンド ウ で 開く </titte> 
</head> 
< く body> 
く p><a href="http://goo.gL/dU5Km1"' target=" 
_bLank"> 紅 茶 の 飲 み 方 の 検索 結果 </a></p> 
</body> 
く /htmL> 


ブラ ウザ 表示 


094 


2 5.1 


@leeeos@ 


ペー ジ 内 の 特定 の 場所 に リン ク す る 


構 
| <a href=" 倫 "> 全く </a> 
便 … 頭 に 「#』| つけ た io 属性 値 
^ … テキ スト 、 イ ンタ ラク ティ ブ -・ 
コン テン ツ 以 外 の 要素 


日 
T 
M 
L 
リ 
フ 
ア 
レ 
ン 
ス 


9 

「#| と id 属性 値 を 指定 し た href 属 性 は 、 クシ ョ ン へ 」 と いう テキ スト に 、href 属 
ペー ジ 内 の 指定 箇所 へ の リン ク を 示し ま 性 値 を 「#oolong_teal に し た a 要 素 を 
す 。 指定 し て いま す 。 その た め 、 ブ ラウ ザ で 表 
還 え ば 、 リ ンク 箇所 が 同じ ペー ジ 内 の 示し て この 部 分 を クリ ッ ク す る と 、 ペ ー ジ 
id 属性 に section_last と つけ た 要素 で あ 内 で 「oolong_teal を id 属性 値 に 持つ 
れ ば 、href 属 性 に #Section_last と 指定 場所 に 移動 する こと が わか り ま す 。 


し ます 。 PCSPREDNSSE 

な お 、HTML4 で 使用 され て いた a 要 素 
の name 属 性 は 、HTML5 で は 廃止 され 
まし た 。 ど の 要素 で も 利用 で きる id 属性 
で 指定 し まし ょ よう 。 

サン プル で は 、「 ペ ー ジ 内 の 鳥 龍 茶 の セ AN の 


サン ブル ソー スズ 謗 中 の セク ショ ン 
< く !DOCTYPE htmt> 
<htmt tang=!"a"> 途中 の セク ショ ン で す 。 
<head> 
<meta charset=!utf-8!> 烏龍茶 セク ショ ン 
<titte> ペ ー ジ 内 の 特定 の 場所 に リン ク す る </titte> 
に 出 に /head> 烏龍茶 セク ショ ン へ よう こそ 。 
<body> 
て 
<a href="#ootong_tea"> ペ ー ジ 内 の 誤 龍 茶 の セ クシ ョ ン へ </a> 
<section 1d="ootong_tea"> 
<h1> 鳥 龍 茶 セ クシ ョ ン </h1> 
<p> 鳥 龍 茶 セク ショ ン へ よう こそ 。</p> 
く /sect1on> 
</body> 
</htmt> 


恒 
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HH 
T 
M 
L 
リ 
フ 
レ 
ン 
ス 


glelewleol#8 
別 ペ ー ジ の 特定 の 場所 に リン ク す る 


構 
el <a href=" 但 ゆ > 全 </a> 


価 … ファ イル パス と 頭 に 「#] つけ た id 属性 値 
人 人 … テキ スト 、 イ ンタ ラク ティ ブ ・ コ ン テ ン ツ 以 外 の 要素 


ジ 


ファ イル パス と 「 埋 と id 属性 値 を 指定 サン プル で は 、「 前 節 の 鳥 龍 茶 セ クシ ョ 
し た href 属 性 は 、 他 の ペー ジ の 指定 箇所 シン へ ] と いう テキ スト に 、href 属 性 値 を 
へ の リン ク を 示し ます 。 「C07_04.htmlfoolong_tea」 に し た a 

例え ば 、 リ ンク 箇所 が product/ 要素 を 指定 し て いま す 。 その た め 、 ブ ラウ 
index.htmt と いう ペー ジ 内 の id 属性 ザ で 表示 し て この 部 分 を クリ ッ ク す る と 、 
に section_tast と つけ た 要素 で あ 「COZ_04.html と いう HTML フ ァイル 
れ ば 、href 属 性 に product/index. 内 の 「oolong_tea] を id 属性 値 に 持つ 
htmt#section_tast と 指定 し ます 。 場所 に 移動 する こと が わか り ま す 。 

な お 、HTML4 で 使用 され て いた a 要 素 
の name 属 性 は HTML5 で は 廃止 され ま 
し た 。 ど ご どの 要素 で も 利用 で きる id 属性 で 
指定 し まし ょ う 。 
<!DOCTYPE html> 
<htmt Lang="a"> 
<head> 
< く <meta charset="utf-8 リ > 


<titte> 別 ペー ジ の 特定 の 場所 に リン ク す る </titte> 
中 曲 ] な 
</head> 前 節 の 鳥 態 茶 セ クシ ョ ン へ 
< く body> 

<p><a href="C97_94.htmt#ootong_tea"> 前 節 の 
鳥 龍 茶 セク ショ ン へ </a></P> 

く /body> 

</htmt> 


ブラ ウザ 表示 
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OKULUEJL) 
メー ル ア ド レス 用 の リン ク を 表す 


構 
sl <a href="maitto: 頑 "> 全く </a> 


価 … メー ル ア ド レス 
人 … テキ スト 、 イ ンタ ラク ティ ブ ・ コ ン テ ン ツ 以 外 の 要素 


H 
M 
L 
リ 
フ 
2 
レ 
ン 
ス 


[maitto:] と メー ル ア ド レス を 指定 し ラウ ザ で 表示 し て この 部 分 を クリ ッ ク す る 
た href 属 性 は 、 指 定 し た メー ル ア ド レス と 、 メ ー ラ ー が 起動 し 送信 先 に 「houchil@ 
に 送付 する メー ルウ イン ドウ へ の リン ク を example.Com] が 入る こと が わか り ま 
示し ます 。 に 

例え ば 、 送 り 先 が abcdeexmpte.jp と 
いう メー ル ア ドレ ス で あれ ば 、href 属 性 
に matttoxabcdeexmpte.jp と 指定 し ま 


す 。 ブラ ウザ 表示 


サン プル で は 、「 メ ー ル ウイ ンド ウ が 開 
きま す 」 と いう テキ スト に 、 href 属 性 値 を 放置 C 
「mailto:houchii@example.com」 に し 
た a 要 素 を 指定 し て いま す 。 その た め 、 ブ 


サン シンプ ブル ソー ス 
< く !DOCTYPE htmt> 
<htmt tang="]a"> 
<head> メー ルウ イン ドウ が 開き ます 
< く meta charset=Wutf-8 リ > 
<ttue> メ ー ル アド レス 用 の リン ク を 表す </t1tLe> 
中 申 』 
</head> _ ノ 
< く body> 
<p><a href="matLto:houch1]@exampte.com"> メ ー ル ウイ ンド ウ が 開き ます </a></p> 
</body> 
</htmt> 
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日 
MI 
M 
L 
リ 
フ 
ア 
レ 
ン 
ス 


)@⑥@@0 提 る 


電話 番号 用 の リン ク を 表す 


構 
sl < く a href="tet: 電 "> 全く </a> 


⑯ - 還 話 番号 


4 テキ スト 、 イ ンタ ラク ティ ブ ・ コ ン テ ン ツ 以 外 の 要素 


[tel」 と 電話 番号 を 指定 し た href 属 性 は 、 

目 定 し た 電話 番号 へ の リン ク を 示し ます 。 
隊 え ば 、 電 話 を か ける 相手 が 090-1234- 
5678 と いう 電話 番号 で め れ ば 、href 属 性 
こ tel09012345678 と 指定 し ます 。 

た だ し これ は 、 ス マー ト フ ォ ン で 実装 さ 
れ て いる 機能 で 、 パソコン で は リン ク を ク 
リッ ク し て も 何 も 起こ り ま せん 。 

サン プル で は 、「 電 話 を か ける 」 と い 
う テ キス ト に 、href 属 性 値 を [tel090 
12345678] に し た ga 要素 を 指定 し て い 


ます 。 その た め 、 ス マー ト フ ォ ン な どの 電 


2 以 洲 知人 
く !DOCTYPE htmL> 
<htmL Lang="a"> 
<head> 
<meta charset=Wutf-8 リ > 
<titte> 電 話 番号 用 の リン ク を 表す </t1tte> 
</head> 
<body> 
8 
<p><a href="tet:09912345678"> 電 話 を か け 
る </a></p> 
</body> 
</htmt> 


話 を か けら れる デバ イス の ブラ ウザ で 表示 
し た と き に 、 こ の 部 分 を クリ ッ ク す る と 、 
「09012345678」 に 電話 を か ける 画面 に 
な る こと が わか り ま す 。 


tei:09012345678 
9088 
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2eeeo# ぁ 
ファ イル ダウ ン ロ ー ド 用 の リン ク を 表す 


構 
4| <a href=" 旬 "> 全く </a> 


人 で ファ イル パス 
今 … テキ スト 、 イ ンタ ラク ティ ブ ・ コ ン テ ン ツ 以 外 の 要素 


H 
T 
M 
L 
U 
フ 
ア 
レ 
ン 
ス 


文書 作成 ソフ ト な ど で 作 成 し た ファ イル ザ で 表示 し て 、 こ の 部 分 を クリ ッ ク す る 
や 、 圧 縮 フ ァイル へ の ファ イル パス を 指定 と 、「archive.zip] と いう ファ イル が ダウ 
し た href 属 性 は 、 フ ァイル を ダウ ン ロ ー ン ロ ー ド され る こと が わか り ま す 。 

ド す る リン ク を 示し ます 。 


に た UK 
ブラ ウザ 表示 
ル パ ス が download/archive.zip で あれ Sai 


ば 、href 属 性 に download/archive.zip 


と 指定 し ます 。 人 
サン プル で は 、「 フ ァイル を ダウ ン ロ ー 
ド す る 」 と いう テキ スト に 、href 必 性 値 Z 
を 「download/archive.zip] に し た a RU 員 
要素 を 指定 し て いま す 。 その た め 、 ブ ラウ 


サン ブル ソー ス ファ イル を ダウ ン ロ ー ド する 
く <!DOCTYPE html> 
<htmt tang="]a"> 
<head> 
<meta charset=Wutfー8 リ > 
| <titte> フ ァイル ダウ ン ロ ー ド 用 の リン ク を 表す </titte> 
</head> 


副 ヾ 


<body> 

<p><a href="'downtoad/archive.zip"> フ ァイル を ダウ ン ロ ー ド する </a></p> 
< く /body> 

</htmt> 
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H 
中 
M 
L 
リ 
フ 
ア 
レ 
ン 
ス 


@@@@O『@ 


特定 の キー に リン ク を 割り 当て る 


構 


に 4 <a href="! 但 " accesskey=" 全 "> 圏 </a> 


@⑯ … リン ク 先 URL 
A ム … ショ ー ト カッ ト 用 の キー 


圏 … テキ スト 、 イ ンタ ラク ティ ブ ・ コ ン テ ン ツ 以 外 の 要素 
a 要 素 の accesskey 属 性 は 、href 属 性 【Windows】 


に 指定 し た ペー ジ に 移動 する と き に 使う 
キー を 示し ます 。 

例え ば 、 ト ッ プ ペー ジ へ の リン ク を 指定 
し た a 要 素 に accesskey 属性 で 「0] と 
記述 し て お く と 、 キ ー ボ ー ド の 「0] キー 
を 組み 合わ せ た シ ョ ー ト カッ トキ ー で トッ 
プペ ー ジ に 移動 で きま す 。 

ショ ー ト カッ トキ ー の 組み 合わ せ は ブラ 
ウザ ご と に 設定 され て お り 、 次 の と お り で 
す 。 


*・ IE…[Al+ [accesskey 属性 値 ] (フォ ー 
カス の み 。 移動 は [Enterl キ ー が 必要 ) 

・ Chrome…[Al+ [accesskey 属 性 値 ] 

: Firefox…[AlL [Shitl+ [accesskey 属 
性 値 ] 

・ Opera…[Shift+[Esc]+[accesskey 属 
性 値 


【Mac】 

: Safari、Chrome、Firefox… 
[Contrel+[Option]+ [accesskey 属性 値 ] 

: Opera…[Shi+[Esc]+ [accesskey 
属性 値 ] 


<!DOCTYPE html> 

<html tang="]a"> 

<head> 

<meta charset=Wutf-8 リ > 
<titte> 特 定 の キー に リン ク を 割り 当て る </titte> 
</head> 

<body> 


=9"> オ レン ジジ ュー ス の 検索 結果 </a></p> 
</body> 
</htmt> 


<p><a href="http://goo.gL/Ve8taf" accesskey 


ブラ ウザ 表示 


儀 と 家人 


オレ ンジ ジュ ー ス の 検索 結果 
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@G@@@O@ 


リン ク 先 の 説明 を 示す 


構 


sl <a href=" 元 " titte=" 人 "> 園 </a> 


倫 … リン ク 先 URL 


ム … リン ク 先 の タイ トル や 説明 
較 … テキ スト 、 イ ンタ ラク ティ ブ ・ コ ン テ ン ツ 以 外 の 要素 


a 要 素 の title 属 性 は 、 リ ンク 先 の タイ ト 
ル や 説明 を 示し ます 。ttle 属 性 を 指定 し 
た a 要 素 に マウ ス オ ー バ ー す る と title 属 

性 値 が 表示 され ます 。 

alt 属 性 値 が 設定 され て いる img 要 素 が 
子 要素 に ある 場合 で も 、a 要 素 の title 属性 
値 が 表示 され ます (た だ し 、IE7 で は img 
要素 の alt 属 性 値 が 表示 され ます )。 

な お 、title 属 性 は すべ て の 要素 で 利 ) 
で きま す 。 

属性 値 こ と し て は 、 そ の 要素 の 補助 的 な 情 
報 を 示す テキ スト に な り ま す 。 下 記 は 、 利 


| ウン フル ソー ス 


<!DOCTYPE htmt> 

<htmt tang="]a"> 

<head> 

<meta charset="utf-8> 

<titte> リ ンク 先 の 説明 を 示す </titLe> 

く /head> 

く body> 

<p><a href=WhttD: / /goo.gL/XkPRZf" 
titte= リ リン ゴ の ダジャレ を 言っ た 人 と 言え ば リ 
シゴ ・ ス ター"> リ ン ゴ ・ ス ター の 検索 結果 </a></ 
P> 

</body> 

</htmLt> 


用 場所 ご と の 例 で す 。 


* 画像 に 使わ れる 場合 … そ の 画像 の 情報 や 
説明 

*・ 段 沙 に 使わ れる 場合 … 脚 注い コメ ント 

*・ 引用 に 使わ れる 場合 … 情 報 源 の 詳細 情報 

・ イン タラ クティ ブ ・ コ ン テ ン ツ に 使わ れ 
る 場合 … ラ ベル や 使用 説明 


ュ ン さき 、 モ る 


いい 、 


リン ゴ ・ ス ター の 


リン シンゴ の ダジャレ を 言っ た 人 と 言え ば リン ゴ ・ ス ター 
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日 
T 
M 
L 
リ 
フ 
ア 
レ 
ン 
ス 


H 
T 
M 
L 
リ 
フ 
の 
レ 
ン 
スズ 


@@e@0O$@ 


外部 ファ イル と の 関係 を 表す 


に | < く a rel=" 旬 "href=" 人 "> 圏 </a> 
| く Link ret=" 坦 "! href=" 全 "> 
<area rel=" 但 " href=" 全 "> 


但 … 他 の 文書 と の リン ク 関 係 を 示す キー ワー ド 


全 … リン ク 先 URL 


画 … テキ スト 、 イ ンタ ラク ティ ブ ・ コ ン テ ン ツ 以 外 の 要素 


a 要 素 、link 要素 、area 要 素 の rel 属 性 は 、 
href 属 性 に 指定 し た 外部 ファ イル と の 関 
係 を 示し ます 。rel 属 性 値 に は 、 下 記 の キー 
ワー ド が 指定 で きま す (キー ワー ド は 半角 
スペ ー ス で 区 切っ て 複数 指定 で きま す )。 


・ alternate… 代 替 文 書 

・ author… 閉 者 情報 

・ bookmark… 直 近 の 祖先 セク ショ ン || 不可 ] 
・ help… ヘ ルプ ペー ジ 

* icon… ア イコ ン 画 像 [a 不 可 ] 

* license… 著 作 権 ラ イセ ンス ペー ジ 

: next… 次 の 文書 


本 BZM 導 ) 


く !DOCTYPE htmt> 

<htmL tang="]a リ > 

<head> 

<meta charset=Wutf-8 リ > 

<titte> 外 部 ファ イル と の 関係 を 表す </t1tLe> 
</head> 

<body> 

<p><a href="C67_10.htmU"' ret="prev"> 前 
の ペー ジ へ </a> 

<a href="C07_12.htmL" ret="next"> 次 の 
ペー ジ へ </a></p> 

</body> 

</htmt> 


: nofollow… 参 照 す る こと を 許可 し な い 
文書 を 示す 注記 [| 不可 

: noreferrer… リ ファ ラ を 送ら な い 文書 
で ある こと の 注記 [| 不可 

:・ prefetch… 前 も っ て 読み 込ん 々 で お くべ 
きき リソー ス 

*・ Prev… 前 の 文書 

: search… 関 連 ペー ジ を 検索 する の に 利 
用 可能 な 文書 

・ stylesheet… ス タイ ル シ ー ト [不可] 

・ tag… 文 書 に 適用 され る タグ [| 不可 


※ [| 不可 ] …Iink 要 素 は 利 
[a 不 可 ] …a 要 素 、 area 


不可 ノ 
索 は 利用 不可 


ブラ ウザ 表示 


ゃ さい モー 
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タイ トル バー の アイ コン を 設定 する 


| <Link ret="shortcut 1con" Mud type=" 全 " 
4| S1zes=" 略 "> 


人 @ ファ ビ コ ン 用 の ファ イル の URL HTML5 新規 
^ ム …… ファ ビ コ ン 用 の ファ イル の MIME タ イプ 
 … ファ ビ コ ン 用 の ファ イル の 幅 ・ 高 さ (16x16 な ど ) 


H 
T 
M 
L 
り 
フ 
ア 
レ 
ン 
ス 


(5 語 思 蘭 フロ ー . コンテンツ 、 フレ ー ジ ング - コ ン テ ン ツ EK まま 3 湯 フレ ー ジ ング ・ コ ン テ ン ツ 


タイ トル バー に 表示 され る アイ コン を 、 2 - 
ファ ビ コ ン (Favaorite icon を 縮め た 呼 * ico…image/vnd.microsoft.icon 


び 方 ) と 言い ます 。 ^ PINg"Image7Pne 
link 要 素 の rel 属 性 に jcon を 指定 し て  'JPg'1mage/jpeg 
ファ ピコ ン 用 の ファ イル を 指定 し ます 。 * Image/g 


href 属 性 に ファ ビ コ ン 用 の ファ イル の sizes 属 性 に は ファ ビ コ ン 用 ファ イル の 
URL を 指定 し ます 。 使 用 で きる 拡張 子 は 幅 と 高 さ を 指定 し ます 。 サ イズ ご と に 異 
ico/png/jpg/gif な ど で す が 、IEZ 以 前 で な る ファ イル を 指定 する と き に 使用 で き 
は ico し か 使用 で きま せん 。 ます 。 一 般 的 な 幅 と 高 さ は 16 x 16 で す 。 

type 属 性 に ファ ビ コ ン 用 の ファ イル の 。 た だ し 、 こ の 属性 は どの ブラ ウザ で も サ 
MIME タ イプ を 指定 し ます 。 拡 張子 ご と ボー ト さ れ て いま せん 。 

の MIME タ イプ は 次 の と お り で す 。 


| サン ブル ソー ス 」 ブラ ウザ 表示 

<!DOCTYPE htmt> 位 タイ トル バー の アイ コン を 
<htmt tang="]a!> 

<head> 

く meta charset=Wutf-8"> 

<titte> タ イト ル バ ー の アイ コン を 設定 する </ 
t1tLe> 

<Link ret="shortcut 1con" href 
=Wfav1con。1ico" て ype=!1mage/Vnd。 
microsoft.1con" sjzes="16x16!> 

く </head> 

< く body> 


|) htmiscss3.codingdesignjp/c. 主 


ファ ビ コ ン は 表示 され て ます か ? 
<p> フ ァ ビ コン は 表示 され て ます が か が?</p> 

く /body> 
< く /htmLt> 


EE ジ 
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開基 境 ど と に 読み 込む CSS フ ァ イ ル を 設定 


清く Lnnk ret="styLUesheet" href=" 介 " media! ム "> 
に 4|  @ … CSS フ ァイル の URL 1 
全 …- 対象 と する ユー ザー 環境 INMMH 請 失 1 
(screen and (min-width: 480px) な ど ) NM 


H 
T 
M 
L 
り 
フ 
ア 
レ 
ン 
ス 


link 要 素 の media 属 性 は 、 対 象 環境 を 時 了 
指定 し 、 読 み 込む ファ イル を 設定 し ます 。 ' 上 … デ レタ イプ 映 末 
対象 環 塊 は 「 メ ディ アタ イプ and (メデ ィ "ツテ レビ 
ア 特 性 の 書式 で 指定 し ます 。 これ を メ ー 

ー メデ ィ ア 特性 
ディ アク エリ ー と 言い ます 。 それ ぞ れ 指定 し た MA っ NR 


で きる 値 は 以下 の と お り で す 。 。 height… ウ イン ドウ の 高 さ 

【 メ ディ アタ イプ 】 < device-width… デ バイ ス の 画面 の 幅 

: all… す べ て : device-height… デ バイ ス の 画面 の 高 さ 
・ aural… 音 声 ブ ラウ ザ ・ orientation… デ バイ ス の 向き 

・ braille… 点 字 デ ィ ス プレ イ (portrait (縦長 )、landscape (横長 )) 
・ handheld… 携 帯電 話 デ ィ ス プレ イ 

- print… プ リン タ ※orientation 以 外 は 「min-」 (最小 値 )、 
- projection… プ ロジ ェ ク タ ー 「max-」 (最大 値 ) を 頭 に つけ て 指定 で き 
・ screen…PC・ ス マー ト フ ォ ン ・ タ ブレ ッ ます 9。 

ト の ディ スプ レイ 


門間 殊 さと に 読み 込 GCSE ※ 
cipocTYPE_ htm1> | | を G hmlscss3codingdesignjp/c 計 、 計 


<htmt tang=! け a"><head> 宇和 ぅ 
<meta charset="utf-8!> に 
<titte> 閲 覧 環境 ご と に 読み 込む CSS フ ァイル を 
設定 </titte> 基 癌 肖 の 9 
<Uink ret="styLesheet" href=Wdf。css" | 
med1a=VWscreen リ > 

<Uink ret=VstyLesheet" href="sp.css" 

media=W'screen and (min-width: 489px)『"> (default) 閲 覧 曲 境 ご と に 表示 を 切り 替え ます 。 
< ぐ Link ret=nstytesheet" href="tb.css" esesa 
media="'screen nd (min-width: 768px)"> ーー ニー ニー ニー ニー バー 
<Uink ret="styLesheet'' href="pc.css" | | Ya 


media="screen and (min-width: 1924px)" 
く /head> 

<body> 葉 半 当 

<p> 環 境 ど と に 表示 を 切り 替え ます 。</p> 

</body> 


</htmt> | 


me0 民 列 で と に 軍人 えま ず 。 
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E 3 モワ 加 問 Ss d 間 、 


@eeeO#@ ぁ 


H 
リン ク の 基準 と な る URL を 指定 する 。 』 
に 4| <base href=" 坦 " target=" 全 "> HTML5 変更 M 

人 @ で … 基準 と な る URL 8 ス 
全 … 任意 の 名 前 
メタ デー タ ・ コ ン テ ン ツ 空 


銀 


base 要 素 は 、 リ ンク の 基準 と な る URL base 要 素 は 、href 属 性 と target 属 性 の 
を 指定 し ます 。 文書 ご と に ひと つ だ け 指 定 ご どちら か を 必ず 指定 する 必要 が あり ます 。 
で きる 要素 で す 。 また 、base 要 素 以 降 に ある リン ク テ キ 

ここ で 言う ラリ ンク は 、 テ キス トリ ンク スト や 画像 、CSS、」avascript は 、 す べ 
の リン ク 先 URL だ け で な く 、 画 像 、CSS、 て base 要 素 の 影響 を 受け ます 。 
javascript な どの URL も 含み ます 。 

href 属 性 に は 、 リ ソー ス へ の URL を 相 
対 パ ス 、 絶 対 パス 、 フ ル パ ス と も に 指定 で 


ET 
属性 に は 、 リ ンク を 開く ウイ ン ブラ ウザ 表示 


target 属 - 
ドウ を a 要 素 の target 属 性 と 同様 に 指定 っ か 投 
で きま す 。 


ツガ 必 ジ エス 
<!DOCTYPE htmt> 
<htmtL Lang=! け a"> 
<head> WEB+DESIGN STAGE を ご 覧 くだ さい 。 
<meta charset="utf-8"> この リン ク は http://gihyojp/design に つなが り ま 
<titue> リ ンク の 基準 と な る URL を 指定 する </ttte> すま 
<base href="httDp://g1hyo.jp/" target="_btank"> 
</head> 
< く body> 
<p><a href="/desgn">WEB+DESTGN STAGE</a> を ご 覧 くだ さい 。<br> 
この リン ク は http: //g1hyo.jp/design に つなが り ま す 。</p> 
</body> 
</htmt> 


お ) リン ク 先 の 表示 ウイ ンド ウ を 指定 する (P.93) : 105 


ま 22 


@e@le @ lO る 


画像 を 挿入 する 


<]mg src=" 二 "> 
信 画像 ファ イル の URL 


>AV ぐ NN に ビ ミ コ エ 


フロ ー ・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 、 エ ン ベ デ ッ ド ・ コ 紅 EK ま を Se 較 空 
ン テ ン ツ 、 イ ンタ ラク ティ ブ ・ コ ン テ ン ツ (usemap が ある と き ) 


0 1 ・ アニ メー ショ ン つ き の ビ ッ ト マ ッ プ 画像 


Src 周 性 は 、 画像 ファ イル の URL を 指定 ソーマ ーー ご ーー つ GF アー メー シュ 
し ます 。 こ の 属性 は 必ず 指定 する 必要 が め ーー 
り ま す 。 ー 
二 二 ニン 。 アニメ ーション つき の ベク ター 画像 

9 7 あー 
ES 付き XMLU) 
: 静 的 な ビッ トマ ッ プ 画像 (GIF、 」PEG、 上 上 

PNG な ど ) な お 、img 要 素 は レイ アウ ト 用 に 使っ 


て は いけ ませ ん 。 特に 、 文 書 上 意味 が な い 、 


:・ 1 ペー ジ の ベク ター 文書 (1 ペー ジ の Eo 
SMC また は な に も 意味 を 追加 し な いよ うな 透明 


PDF、SVG 付 き XML) 


な 画像 を 表示 する た め に 、 使 用 し て は いけ 
ませ ん 。 


』 がい 
十 
放 
(のり / 
他 
す 
ス 
六 
中 
隊 
ト 


サジ ヴ ル ソー エズ 
く !DOCTYPE html> 
<htmt Lang="]a リ > 
<head> 
< く meta charset=Wutf-8"> 
<tjtte> 画 像 を 挿入 する </titte> 
</head> 
く body> 
<div><]mg src="S0891、png"> く /d1v> 
</body> 
く /htm1t> 
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eeeo き 
画像 が 表示 され な いと き の テ キス ト を 指定 


構 
文 <1mg Src=" 坦 " 上 = 作り > 


介 … 画像 ファ イル の URL 
人 … 代替 テキ スト 


AV ぐに ミコ ゴ エ 


img 要素 の alt 属 性 は 、 画 像 と 同等 の 内 る 場合 に 、alt 属 性 値 が 利用 され ます 。 た 
容 の テキ スト を 示し ます 。 だ し 、Safari、Google Chrome で は 画 
き に 指定 する 内 容 が な い 場 合 を 除い て 、 像 を 表示 し な い 設 定 に し て も at 属性 値 を 
at 属性 は 指定 を し な けれ ば いけ ませ ん 。 表示 し ませ ん 。 
また 、alt 属 性 の 値 は 画像 の 適切 な 代替 
* あ る 必要 が あり ます 。 

この テキ スト は 、 画 像 を 見 られ な い 人 や 、 
そもそも 画像 の 読み 込み を 無効 に し て いる 間 88UUUDNHNDiI 


に 向け て 提供 され る こと を 意図 し て いま っ 
人 に 向け て 提供 さ 忌 キ ) コ 食べ も の か し 5 7 


す 。 

サン プル で は 、img 要 素 の alt 属 性 に 「 ア 
リス は ケー キ を 食べ て 大 きく な りす ぎる 」 
と いう テキ スト を 指定 し て いま す 。 その た 
め 、 ブ ラウ ザ で 画像 を 表示 し な し 設定 に し 
て いた り 、 読み 上 げ ブ ラウ ザ を 利用 し て い 


NN 
の 
十 
| 
の 
他 
オ 
| 
ジ 
由 
7 
ト 


< く !DOCTYPE htmt> 
| <htmL tang=" お a"> 
| <head> 4 
<meta charset=Wutf-8 リ > 

<titte> 画 像 が 表示 され な いと き の テ キス ト を 指定 </t1tLe> 
</head> 
<body> 
<div><img src="S9892.png" att=" ア リス は ケー キ を 食べ て 大 きく な りす ぎる ></div> 
</body> 
く /htmt> 


| 
| 
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2eeeos@ 
ブラ ウザ 上 の 画像 サイ ズ を 指定 


構 

に 。 <]mg src=" 倫 " width=" 人 AA" hejght=" 略 "> 
借 画像 ファ イル の URL 
合 … ブラ ウザ で 表示 させ る 画像 の 幅 
圏 … ブラ ウザ で 表示 させ る 画像 の 高 さ 


H 
T 
M 
L 
リ 
グ 
2 
レ 
ン 
ス 


img 要 素 の width 属 性 は 画像 の ブラ ウ 属性 ・height 属 性 に 100 と 指定 する こと 
ザ 上 で の 幅 を 、height 属 性 は 画像 の ブラ こ な り ます 。 


ウザ 上 で の 高 さ を 示 し ます 。 
有 width 属 性 と height 属 性 を 使う と 、 ブラ ウサ 表示 
名 因 P こ と 解像度 が 異な る スマ ー ト フォ ン や タ PC 用 
時 議 ブレ ッ ト 端 末 に 、 適 切な 大 き さ で 表示 する 
* こと が で きま す 。 
の 葬 え ば 、PC で 幅 ・ 高 さ が 100px の 画像 
占 較 を 表示 する と さ 、 解 多 度 が 2 倍 の スマ ー ト 
4 フォ ン や タブ レッ ト 端 末 で 同じ 画像 を きれ 
g 全 議 い に 表示 する に は 、 幅 ・ 高 さ が 200px の 
間 画像 を 別に 用 意 し て 、img 要 素 の width 
My 中) Po 
<!DOCTYPE htmu> 
<htmt tang="]a"> 
<head> 
< く meta charset=Wutf-8> 
<titte> 画 像 の ブラ ウザ で の 表示 サイ ズ を 指定 </tttte> 
| 
</head> 
<body> 
<p>PC 用 <br> 
<1mg Src="S9893.png" width="266 heght="196"></p> 
<p> 高 解像度 の 端末 用 <br> 
<1mg Src="S9893_2.png''width="266" hetght="196"></p> 
</body> 
</htmt> 
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2e e 9 OL 
イメ ー ジ ・ ム ー ビ ー な ど を 挿入 する 


(| <ob]ject data=" 坦 " type=" 全 " bk height=" 太 | 

= "> て < く /ob]ect> 
⑯ … オブ ジェ クト の ファ イル URL RFNALS 新規 
全 … 但 の MIME タ イプ 
圏 オブ ジェ クト の 幅 
廊 … オブ ジェ クト の 高 さ 


・ そ の 他 の 属性 
typemustmatch=" 今 "… 位 の MIME タ イプ と 
全 が 同じ で ある と き 、 旬 を 利用 可能 に する 
name=WO… オ ブ ジ ェクト の 名 前 
usemap="COWー イ メー ジマ ッ プ の 設定 
form=WA へ 関連 の ある フォ ー ム の 設定 


じじ に Gbjact 要素 フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ ・object 要素 0 個 以上 の param 要 


コシ ジテ ジ ルツ エ ベ デ ツ ッ ド コッ ニシ ツイ ジ タ ジ 素 、 そ の 後に フロ ー・ コ ン テ ン ツ 、 
クティ ブ ・ コ ン テ ン ツ (usemap 属性 が ある と き ) シタ ラ クティ イブ ガ ド ロ ンジ デジ ツ 
・Daram 要素 な し ・param 要素 空 
・embed 要素 フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ ・embed 要素 空 
コン テ ジ シッ ミド エン ペデ ッ ド ロジ シテ ジ ツイ シタ ラ 
クティ ブ ・ コ ン テ ン ツ 
W 出 
Object 要 素 は 、 画 像 や プラ グイ ン で 表 び 出 され る プラ グイ ン の パラ メー タ を 定義 
示す る 外部 リソー ス を 示し ます 。 し ます 。 
data 属 性 は 、 オ ブ ジ ェクト の ファ イル emped 要 素 は 、object 要 素 が 利用 で 
URL を 示し ます 。 き な い 環境 で 、 プ ラグ イン が 必要 な コン テ 
tye 属 性 は 、 オ ブ ジ ェクト の AIME タ ン ツ を 読み 込む の に 利用 で きま す 。 


イブ を 示し ます 。 また 、oDject 要 素 の 内 容 に は 、 プ ラグ 
Object 要素 に は data 属 性 、type 属 性 イン が 利用 で き な い 環境 の た め に 情報 を 提 

の ご どちら か が 指定 され て いる 必要 が あり ま 供する こと が で きま す 。 

す 。 サン プル で は 、 動 画 フ ァイル を object 
width 属 性 は オブ ジェ クト の 幅 、 要素 で 読み 込む よう に 指定 し て いま す 。 そ 

height 属 性 は オブ ジェ クト の 高 さ を 示し の た め 、 イ ラス ト の 下 に 動画 を 表示 し て い 

ます 。 る こと が わか り ま す 。 
object 要 素 の 内 容 に は 、 プ ラグ イン へ 

の パラ メー タ や 、object 要 素 が 利用 で き 

な い 環 境 の た め の 要 素 を 指定 する こと が で 

きま す 。 
param 要素 は 、object 要 素 に よっ て 呼 


関連 属性 値 の パリ エー ショ ン (P.28) 、 イ メー ジ 内 に 自由 に リン ク を 設定 する (P.111)、 1 109 
入力 フォ ー ム を 自由 に 配置 する (P.151) 上 


AN ぐに ミコ エ 


ジ 
十 
了 
の 
他 
す 
ヌ 
前 
1 
隊 
ト 


a 
M 倫 
L <!DOCTYPE htmt> 
リ <htmt tang="a"> 
フ く head> 
ア <meta charset="utf-8 リ > 
レ <titte> イ メー ジ ・ ム ー ビ ー な ど を 挿入 する </ttte> 
ン [EK/head> 
ス <body>E 店 当 
<object width=!290! he1ght="159" ENEuM 中 略 uk 
<param name="attowFutLScreen'' vatLue=" モ true リ > 
<embed src=" 馬 測り type="appLication/x-shockwave-flash"' width="209" height="159" 
aLLowfutLscreen=" て rue リ > 
<a href=『 世 計 : 六 > ビデ オ を 見 る </a> BEHgciizhi 
</object> ブラ ウザ 表示 
</body> 
</htmt> 
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Eo mp デ ーー ーー ニー ーー ーーー rs 
隊 5.1 


gelee 0 る 
イメ ー ジ 内 に 自由 に リン ク を 設定 する 


構 

に | <1mg src=" 倫 "usemap="# 合 "> 
く <maDp name=" 全 "> 
<area shape=" 較 " coords="" href=" 金 " atts="O" 
target=W()W> 


AN ぐ で NN に レミ ゴ コ エ 


く /map> 


… 画像 ファ イル の URL 

… img 要素 と map 要 素 を 関連 付け る 名 前 
・ リン ク 範 囲 の 形 (circle、poly、 rect) 
・ リン ク 範 囲 を 示す 座標 
2 完 UE 

… 代替 テキ スト 

. リン ク 先 を 表示 する ウイ ンド ウ 名 


〇 の ②⑨ 金 オキ 男 > @ 


(EE map 加 球 フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ ESEC 但 map 要素 肖 骨 
・area 要素 フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ ・area 要素 空 


img 要 素 の usemap 属 性 は 、 属 性 値 に 


ラー ・ Poly… 多 角形 
map 要 素 の name 属 性 を 指定 する こと で 、 PO 
img 要素 と map 要 素 を 関連 付け ます 。 6 8 ギャザ 


ma 要素 は 、 イ メー ジマ ッ プ を 定義 し 板 ,( ひ と つゆ の ポイ ント の y 鹿 標 ) ( 
Sn 下 た つめ の ポイ ント の x 座 標 ), (ふた つめ 
ます 。 イメ ー ジ マッ プ は 、1 枚 の 画 人 内 に ニャ ント の y 生 (DF ポ イン ト 分 
複数 の リン ク 和 領域 を 作る も の で す 。 リ ンク の 店 標 指定 )" ー 
領域 を 定義 する area 要 素 を まとめ ます 。 
area 要 素 の shape 属 性 は リン ク 範 囲 の  ・rect… 四 角形 
形 、coords 属性 は リン ク 範 囲 の 座標 を 示 coords デ "(左上 の x 座 標 ), (左上 の y 座 
し ます 。 標 ), ( 右 下 の x 座 標 ), ( 右 下 の y 座 標 )" 
Shape 属 性 に 指定 で きる キー ワー ド と 
CoOrds 属性 に 指定 する 座標 は 以下 の と お area 要 素 の src 属 性 は リン ク 先 の URL、 


イ 
メ 

1 
0 
士 
( 
(の ) 
他 
オ 
還 
4 
中 
ウ 
ト 


り で す 。 at 属性 は リン ク 範 囲 の 代替 テキ スト 、 
target 属 性 は リン ク 先 を 表示 する ウイ ン 
"Clelend9 ドウ 名 を 示し ます 。 


coords="( 円 の 中 心 の x 座 標 ), (円 の 中 


- サン プル で は 、 イ ラス ト を 表示 する img 
心 の y 座 標 ), (円 の 半径 )" 


要素 に usemap 属 性 を 指定 し て いま す 。 
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AN ぐに ミコ エ 


』 IN 
MI 
| 
の 
他 
オ 
四 
4 
下 
の 4 
トド 


その た め 、 公 爵 夫 人 の 顔 は 四角 の 領域 で 、 
ゲー ム 機 に は 多角 形 の 領域 で リン ク が 設定 
さざれ て いま す 。 


が 2 ワル ツー エス 
く !DOCTYPE htmt> 
<htmt tang="]a"><head> 
<meta charset="utf-8 リ > 
<titte> イ メー ジ 内 に 自由 に リン ク を 設定 する </t1tLe> 
EE 凍 : に /head> 
<body> 
<div><img src="S9896.png" alt=" 無 愛想 な 公 忠 夫人 " usemap="#map"><d1v> 
<map name="map"> 
<area shape="rect!' coords=!96。119。167,162" href="page1.htmt' att=" 無 愛想 な 公 鮮 夫人 "> 
<area shape="poty" coords="113,235 114 ,261 ,167 252 ,153,229"! href="page2・htmL' 
alt= リ ゲー ム は 1 日 1 時 間 リ > 
< く /map> 
</body> 
</htmt> 


〒- ム は 1 
1 生音 っ ト 中 


ぐみ Sr 
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@e@leleo ぁ 


H 
説明 文 つ き の 写真 な ど を 表す M 
L 
リ 
」 <figure> の ラ 
-。 人 @ HTML5 新規 
<figcapt1on> 含 く /figcapt1on> ヌス 
く </figure> 
| 偽 …… コンテンツ (画像 、 動 画 な ど ) 
人 琴 ei の を カンジ ショ ヨッ CI feure 以下 の いずれ か 
| 1 要素 を ひど つ 伴う フロ ー・ 
| コン テン ツ 
障 カテ コリ ー 一 . コンテンツ 、 セ クシ ョ ニン グ ・ ル ー フロー・ コ ン テ ン ツ ッ 
| Eee 較 Hi ii HH 投 


figure 要 素 は 、figcaption 要 素 と 一 緒 サン プル で は 、 イラ スト を figurea 要 素 、 
に 使う こと で 、 キ ャ プシ ョ ン つ き の 自 己 完 「 ボ ー ナ スス テー ジ か が か しら?」 と いう テキ 08 
結 政 コ ン テ ン ツ を 表し ます 。 こ こ で 言う コ スト に figcaption 要素 を 指定 し て いま す 。 
ン テ ン ツ と は 、 ペ ー ジ 内 に 不可 欠 で は ある その た め 、 イ ラス ト と 説明 文 を 関連 付け し 
も の の 、 入 る 場所 は 重要 で は な いも の で す 。 て いる こと が わか り ま す 。 

例え ば 、 写 真 画像 、 動 画 、 グ ラフ 、 プ ロ 
グラ ムコ ー ド の サン プル 、 詩 な ど で す 。 

figcaption 要 素 は 、 コ ン テ ン ツ の 前 後 
ご ちら に 使用 し て も 問題 あり ませ ん 。 

また 、figure 要素 を 入れ 子 に し て 、 複 数 
の figure 要素 を まとめ て figcaption 要 素 
で キャ プシ ョ ン を つけ る こと も で きま す 。 


dm 以 
<!DOCTYPE htmt> 
<htmt Lang="]a"> 
く head> 
< く meta charset=Wutf-8!> 
<t1tte> 説 明文 つき の 写真 な ど を 表す </titte> 
</head> 
<body> 
く figure> 
<jmg Src="S9897.png' altt=!W> 
<figcaption> ボ ー ナ スス テー ジ か し ちら ? </figcapton> 
< く /figure> 
</body> 
</htmt> 
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Seeweos ぁ 
音楽 を 埋め 込む 


<aud1o src=" 欠 " pretoad=" 全 " 0 toop muted 
| ControLs> く /aud1o> 


借 音楽 ファ イル の URL 
人 … 音楽 ファ イル の 先読み の し か た 
(none、metadata、auto) 


フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 、 src 属性 が ある と き :0 個 以上 の track 要素 、 
エン ペデ ッ ド ・ コ ン テ ン ツ 、 イ ンタ ラク ティ ブ ・ コ 透過 (た だ し audio 要素 、video 要素 を 除く ) 
シテ ン ツ (controls 属性 が ある と き ) src 属性 が な いと き : 0 個 以 上 の source 要 
素 、0 個 以上 の track 要素 、 透 過 (た だ し 
audio 要素 、video 要素 を 除く ) 


H 
T 
M 
L 
リ 
フ 
ア 
レ 
ン 
ス 


HTML5 新規 


audio 要 素 は 、 音 楽 フ ァイル の 配信 方 autoplay 属 性 は 自動 再生 、loop 属 性 
法 を 指定 し ます 。 は ルー プ 有 再生 を 指定 し ます 。 muted 属 性 
srC 属 性 は 、 音楽 ファ イル の URL を 指定 は 、 初 期 状 態 を 消音 に し ます 。controls 
し ます 。preload 属 性 の 属性 値 は 、 以 下 属 信 は 、 操 作 ボ タン を 表示 し ます 。 
の 3 つの キー ワー ド の いずれ か を 指定 する 読み 込む こと が で きる 音楽 ファ イル 形式 
こと で 、 音楽 ファ イル の 先読み 方 法 を 指定 は 下記 の と お り で す 。 


| 

* で きま す 。 

の s IE…MP3、AAC 

他 ・ none… 先 読み し な い ・ Chrome…Ogg、 MP3、WAVE 
4 。 metadata… 容 量 、 ト ラッ クリ スト 、 - Firefox…Ogg、WAVE 

ジ 長 さ の デー タ だ け 先 読み する : Safari…MP3、AAC、VVAVE 
了 : auto… す べ て 先読み する : Opera…Ogg、WAVE 

ト 


: Android… デ バイ ス に 依存 


| サン プル ソー ス | = IOS…MP3、AAC 


< く !DOCTYPE htmL> 
<htmL tang="]a"> ロ ps 
Rh ブラ ウザ 表示 

<meta charset=Wutf-8"> 
<titte> 音 楽 を 埋め 込む </titte> 
ファ イイ ボー し の 
</head> ましゃ やっ た 中 大 
<body> | < 
< く dtv><audio src="audio.mp3!! pretoad= 
metadata' controts></aud1o> く /d1Vv> 
</body> 

く /htmLt> 
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CK KKUE 


ムー ビー を 配置 する 


借 動画 ファ イル の URL 
今 … 画像 ファ イル の URL 
革 動画 や 画像 を 表示 する 幅 


コン テン ツ 、 エ ン ベ デ ッ ド ・ コン テ 
ジウ ME タラ クティ イジ ミコ ヨシ デシ ツ 
(controls 属性 が ある と き ) 


<v1deo src=" 坦 " autopLay toop muted controts 
sa poster=" 全 "width=" 圏 " height=" 衣 ></video> 


HTML5 新規 


(ビク セル 数 ) 
去 … 動画 や 画像 を 表示 する 高 さ 


直 E 訪 暗 フ ロー コン テン ツ 、 フレ ー ジ ンク ・ 統計 2 記 src 周 性 が ある と き :0 個 以上 の track 要 、 授 骨 


(た だ し audio 要素 、videg 要素 を 除く ) 

src 属性 が な いと き : 0 個 以上 の source 要素 、0 
個 以 上 の track 要素 、 透 過 (た だ し audio 要素 、 
video 要素 を 除く ) 


video 要 素 は 、 動 画 フ ァイル の 配信 方 法 
を 指定 し ます 。 


態 、controls 属 性 は 操作 ボタ ン の 表示 、 
poster 属 性 は 代替 画像 の URL、width 属 


SiC 属性 は 、 動 画 フ ァイル の URL を 指 
し ます 。preload 属 性 の 属性 値 は 、 以 ] 
の 3 つの キー ワー ド の いずれ か を 指定 する 
こと で 、 動 画 フ ァイル の 先読み 方 法 を 指定 
で きま す 。 


: none… 先 読み し な い 

: metadata… 容 量 、 ト ラッ クリ スト 、 
長 さ の デー タ だ け 先 読み する 

* auto… す べ て 先読み する 


autoplay 属 性 は 自動 再生 、loop 属 
性 は ルー プ 再 生 、muted 属 性 は 消音 状 


性 は 幅 、height 属 性 は 高 さ を 指定 し ます 。 
読み 込む こと が で きる 動画 ファ イル 形式 は 
下記 の と お り で す 。 


: IE…MP4、WebM ( 要 ブ ラグ イン ) 
: Chrome…Ogg、 MP4、WebM 
: Firefox…Ogg、WebM 

- Safari…MP4 

: Opera…Ogg、 WebM 

: Android…MP4、WebM 

: IOS…MP4 


ブラ ウザ 表示 


サン ブル ソー ス 
| <!DOCTYPE htmL> 
<htmt tang=" け a"> 
<head> 
| <meta charset="Wutf-8 リ "> 
<tjtte> ム ー ビ ー を 配置 する </titte> 
| </head> 
| <body> 


height="159"></V1deo></d1v> 
</body> 
</htmt> 


<div><video src="video.mp4" autoptay 
controts poster="poster.]pg'' width="209" 


っ け 3 
ャ こう だ > 友 の 
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eeeeo ゃ る 
複数 形式 の 音楽 や ムー ビー を 用 意 する 


| <source src=" 電 "type=" 合 "media=" 還 "> 
YD 


に 。  @ 音楽 / 動 画 ファ イル の URL ⑨③ 
ム … 音楽 / 動 画 ファ イル の MIME タ イプ HTML5 新規 


一 … 対象 の メデ ィ ア 


カテ ゴリ ー 但 54W 内 包 で だ きる も の 症 ヨ 


source 要 素 は 、 複 数 の 音楽 / 動 画 フ ァ 【 斉 楽 フ ァイル 
イル を 指定 する た め の 要 素 で す 。 s AAC…audio/aac 


現在 、 ブ ラウ ザ 間 で 共通 し て 利用 で き  ・MP4…audio/mp4 
る ファ イル 形式 が め あり ませ ん 。 そ の た め 、 : MP3…audio/mpeg 
audio/video 要 素 を 利用 し て ひと つの 音 *・Ogg…3udio/o8g 
楽 や 動画 を 配信 する 場合 、 複 数 形式 の ファ  *WAVE…audio/wav 


イル が 必要 と な り ま す 。 : WebM…audio/webm 
source 要 素 を 使用 する 場合 、audio/ 
video 要 素 に src 属性 を 利用 し ませ ん 。 動画 ファ イル 】 


srC 属 性 は ファ イル の URL を 指定 し ます  * MMP4…video/mp4 
(必須 )。 type 属 性 は ファ イル の AMIME タ “OggVideo/og5g 
イブ 、media 必 性 は 対象 の メデ ィ ア を 指 WebMvideo/webm 
定 し ます 。 

指定 で きる 属性 値 は 次 の と お り で す 。 


サッ ヴ ルソー エス 1 
<!DOCTYPE html> ブラ ウザ 表示 
<htmt tang="]a"> 
く head> Ws 
<meta charset=!utf-8 リ "> 
<titte> 複 数 形式 の 音楽 や ムー ビー を 用 意 する </t1tte> 
此 凍 :K/head> 


<div><video controts width="290" heght="150"> 
<source src=Wvideo.mp4" type="video/mp4" 
med1a="'screen リ > 

く source src="video-webm' も ype="video/webm"' 
med1a="'screen リ "> 

</v1deo></d1iv> 

</body> 

く /htmt> 


116 1 関連 閲覧 環境 ご と に 読み 込む CSS フ ァイル を 設定 (P.104)、 音 楽 を 埋め 込む (P.114) 、 
: ムー ビー を 配置 する (P.115) 


8elslelolW@ 
ピー 内 に 字幕 を 表示 する 


| <track src=" 倫 "kind=" 人 る MM tabet=" 到 " 
4| defautt> 


但 … ムー ビー 内 で 利用 する テキ スト ファ イル の URL 
全 … 音楽 / 動 画 フ ァイル の MIME タ イプ 
対象 の メデ ィ ア / 支 … 言語 切替 が で きる と き に 表示 する 文字 


AN ぐに ミコ ゴ エ 


track 要素 は 、 ム ー ビ ー 内 で 利用 する テ 


ト スト 表示 。 
キス ト ( 学 牙 た 作 を 指定 し ます 。 
Ph 時 : metadata… ス クリ プ ト か ら 利 用 する 
Es ・ F た め の テ キス ト 。 非 表示 。 
に (ソノ ソ ヴ の に) 
kind 属 性 は 、 ム ー ビ ー と テキ スト ファ srclang 属 性 は テキ スト ファ イル で 使 
イル の 関係 を 示し ます 。 指定 で きる 属性 値 用 され て いる 言語 、label 属 性 は 言語 を 選 


本 


は 以下 の と お り で す 。 択 で きる 際 に ブラ ウザ に 表記 され る 文字 、 
請 / 紀 期 表示 で ー 

・ subttlesr・ 会 語 の 暫 写 また は 和訳 。 動 

画 の 上 に 表示 。 9 Ok 


: captions… 会 話 の 転写 また は 翻訳 、 サ 来 が 最初 に 利用 され ます 。 


ブラ ウザ 表示 


ウン ド エ フ ェクト 、 関 連 す る 音声 情報 。 
動画 の 上 に 表示 。 

・ descriptions… 映 像 や 音楽 の た め の テ kr い Ap や ? 
キス ト に よる 説明 文 。 音声 合成 され る 。 3 

: chapters… 映 像 や 音楽 を 操作 する の に 
使わ れる 章 の タイ トル 。 ブ ラウ ザ に リ 


サシ プル ソー ス 
く !DOCTYPE html> 
<htmt tang=! け a"> 
く head> 
<meta charset="utf-8 リ > 
<titte> ム ー ビ ー 内 に 字幕 を 表示 する </titte> 
E 山 : 衣 /head> し 
く body> 
<d1v><video src="video.mp4" controts width="299!" he1ght="159"> 
< て track src=" モ track_ja.vtt" kind=!'subt1tLes" srctang="a" tabet="Japanese'' defautt> 
<track Src=" モ rack_en.vtt" kind="subt1ttes"' srctang="en" tabet="EngLish"> 
く /video></div> 
< く /body> 
</htmt> 
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動画 の 上 に 字幕 を 表示 する た め に は 、WVvebVTT (Web Video Text Tracks) と いう 
仕様 に 治っ た テキ スト ファ イル を 作る 必要 が あり ます 。 
WebVTT フ ァイル の 文字 エン コー ド 方 式 は UTF-8 と な り ま す 。 


征 太 本 の 構文 
以下 WebVTT フ ァイル の 基本 と な る 構文 で す 。 
| WEBVTT 


文 @⑯ 字幕 の 開始 時 間 (00:00:10.000 な ど ) 
人 @ 一 > 人 ム … 字幕 の 終了 時 間 (00:00:15.000 な ど ) 
圏 …@ と 4A の 示す 時 間 中 に 表示 する テキ スト 


最初 の 行 の WEBVTT は 、 必 ず 入 れる 言葉 で す 。 

介 か ら 細 の 行 の 上 下 に は 空 行 が 入っ て いま す 。 こ の 空 行 で 挟ま れ て いる 範囲 が 、1 回 に 
表示 する 情報 の まとまり に な り ま す 。 

字幕 の 開始 時 間 介 と 字幕 の 終了 時 間 人 4 は 、 そ れ ぞ れ 「 時 間 : 分 : 秒 . ミ リ 秒 ] と いう 形式 
で 記述 し ます 。 

氏 と 4A の 示す 時 間 中 に 表示 する テキ スト 圏 は 、1 行 で も 複数 行 で も 問題 あり ませ ん 。 長 
い 文 章 は 、 動 画 の 上 に 表示 され る と き に は 、 動 画 の 幅 に 合わ せ て 自動 で 改行 され ます 。 
また 、 基 本 の 構文 に 記述 を 加え る こと で 様々 な 調整 が で きま す 。 字幕 の 終了 時 間 全 の 石 
に 加え る 記述 は 、 半 角 ス ペー ス で 区 切る こと で 複数 の 記述 を する こと が で きま す 。 


昨 縦 書き ・ 横 書き 
表示 方 向 を 縦 書き (に する 場合 は 、 時 間 の 横 に 「vertical: 位 ] と 記述 し ます 。 
食 は 縦 書 き の 方 法 を 示す キー ワー ド で 、rl ( 右 か ら 左 )、lr ( 左 か ら 右 ) を 指定 し ます 。 


上 グ 上 下位 軒 
行 の 上 下 の 位置 を 調整 する 場合 は 、 時 間 の 横 に 「line: 氏 と 記述 し ます 。 
@ は 動画 の 上 端 か ら の 位置 で 、1 ( 行 数 )、10% な どの 数 値 を 指定 し ます 。 


邊 左右 位置 
行 の 左右 の 位置 を 調整 する 場合 は 、 時 間 の 横 に 「position: 但 |] と 記述 し ま 
価 は 動画 の 左端 か ら の 位置 で 、10% な どの 数 値 を 指定 し ます 。 


表示 幅 を 調整 する 場合 は 、 時 間 の 横 に 「size: 但 ] と 記述 し ます 。 
今 は 表示 幅 で 、10% な どの 数 値 を 指定 し ます 。 


邊 テキ スト の 装飾 


太字 、 斜 体 、 下 線 の 装飾 を する 場合 は 、 テ キス ト に それ ぞ れ Db 要 素 、i 要 素 、u 要 素 を 
使用 し ます 。 


中 テキ スト の 行 揃え 

テキ スト の 行 揃 え を 調整 する 場合 は 、 時 間 の 横 に 「align: 借 ] と 記述 し ます 。 

人 @ は 行 揃え の キー ワー ド で 、start (左寄せ )、middle (中 央 寄せ )、end (右寄せ ) 
を 指定 し ます 。 


| ウン フル ソー ス OCGDMmM 


WEBVTT 


099:99:99.999 --> 99:99:93.999 verticatsrL Line:1 position:10% agn:Star も 
縦 書き で 表示 する と き の 
テキ スト 


| ウン フル ツー ス ui 
く !DOCTYPE htmt> 


フラ 


<htmt tang=! け a"> 

く <head> 

< く meta charset=Wutf-8> 

<titte>Cotumn 字幕 を 制作 する </titLe> 

EE:K/head> 

く body> 

く video src="video.mp4 controts> 

<track src="track_]a_cotumn.Vtt" kjnd="subt1tLUes" srctang="]a"' tabet="dapanese" 
defautt> ド 
く /video> 

</body> 

</htm1t> 


ーNHWNIN 計 SN+ ツ ー ユ 


BLLUEJL) 
別 ペ ー ジ を ペー ジ 内 の 一 部 に 挿入 する 


構 
・。 <]frame src=" 坊 > 


⑯ … ペー ジ URL 


H 
T 
M 
E 
り 
フ 
ア 
レ 
ン 
ス 


EE だ D 還 ラ ロー コンテンツ 、 フレ ー ジ ング . コ ン テ ン ツ 、 紀 EK まま 3 但 テキ スト 
エン ベ デッド ・ コ ン テ ン ツ 、 イ ンタ ラク ティ ブ ・ コ 
ン テ ン ツ 


Web ペ ー ジ の 使い 勝手 と アク セス の し いま す 。 そ の た め 、 ブ ラウ ザ で 表示 し た 
や すさ に 弊害 が あめ る た め 、HTML5 で は 、 _ と き に 、 フ レー ム 内 に C09_01_iframe. 
Web ペ ー ジ を 分 割 し て 表示 する フレ ー ム html 内 に 配置 され て いる 画像 が 表示 され 
が な く な り ま し た 。 た だ し 、 ペ ー ジ 内 の 一 て いる こと が わか り ま す 。 

部 に 外部 ペー ジ を 表示 する iframe 要 素 は 
残り まし た 。 

jrame 要 素 を 使用 する と 、 ペ ー ジ 内 に 
別 の ペー ジ を 配置 する こと が で きま す 。 

sc 属性 は 、 埋 め 込む ペー ジ の URL を 指 
定 し ます 。 

サン プル で は 、iframe 要 素 の src 属 性 
こ 「C09_01_iframe.htmll を 指定 し て 
| サン ブル ソー ス 剛 」 
く !DOCTYPE htmt> 
<html tang="]a"> 
<head> 
< く meta charset="utf-8 リ > 
<titte> 別 ペー ジ を ペー ジ 内 の 一 部 に 挿入 する </t1tte> 
</head> 
く <body> 
く dtv><1frame Src="C99_91 frame.htmL"> く </d1v> 


</body> 
< く /htmt> 
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4.0 6.0 


|@ el@lO」 間 @ 


要素 を ペー ジ 内 の 一 部 に 挿入 する 


構 
に <jframe srcdoc=" 電 "> 


但 … フレ ー ム 内 に 表示 する 要素 


| 


昌 

T 

M 

L 

リ 

2 
4 

HTML5 更新 レ 
1 朱 


srcdoc 悦 性 は 、 フ レー ム 内 に 表示 する 
要素 を 指定 し ます 。 こ の 属性 を 利用 する と 、 
フレ ー ム の 中 に ペー ジ 内 の 要素 を 表示 で き 
ます 。 
属性 値 の 中 で は 、 属 性 値 を 囲っ て いる 引 


用 符 が 混ざっ て し まい 、 ブ ラウ ザ に 正しく 
属性 値 の 範囲 を 認識 さ ご する こと が で き な い 
か ら で す 。 

iframe 要 素 に src 属 性 も srcdoc 属 性 も 
指定 され て いる と き は 、srcdoc 属 性 に 指 


用 待 を 使用 で きま せん 。 例え ば 、 必 性 値 を 
囲っ て いる 引用 符 に ダブ ルク オォ オー テ ー シ ョ 
ン 「"」 を 使っ て いる 場合 、 属 性 値 で は シ 
ング ルク オォ オー テ ー シ ョ ン 「'!」 も し く は 実 
体 参照 「&quotj] で 表記 する 必要 が あり 
ます 。 そう し な いと 属性 値 の 開始 と 終了 の 
範囲 を 示す 引用 符 と 、 属 性 値 の 中 で 使う 引 


定 し た 内 容 が 優先 され ます 。 

サン プル で は 、iframe 要 素 の srcdoc 
属性 に 「<div><img src='S0902. 
DPng></div>」 を 指定 し て いま す 。 その 
た め 、 ブ ラウ ザ で 表示 し た と き に 、 フ レー 
ム 内 に この html が 表示 され て いる こと が 
わか り ま す 。 


<!DOCTYPE html> 


<htmt tang="]a リ > 

<head> 

< く meta charset=Wutf-8 リ "> 

<titte> 要 素 を ペー ジ 内 の 一 部 に 挿入 する </titte> 
</head> 

< く body> 


div>!> 
</body> 
</htmt> 


<iframe srcdoc=V<d1v><1mg src=!S9992.png'></ | 


記号 や マー ク を 表示 する (P.44) 
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フ 


@@@@0 香 @ 
イン ライ ン フ レー ム の サイ ズ を 指定 する 


構 
に <]frame src="" width="A" MM =" 還 "> 


の ペー ジ URE 
今 … イン ライ ン フ レー ム を 表示 する 幅 
田 … イン ライ ン フ レー ム を 表示 する 高 さ 


iframe 要 素 の width 属 性 と height 属 
性 は 、 そ れ ぞ れ イ ン ラ イン フレ ー ム を 表示 
する 幅 と 高 さ を 示 し ます 。 

属性 値 は 、 ピ クセ ル 数 で 指定 する 必要 が 
ae パー セン ト (%) を 含 値 は 指 


プラ ウザ 表示 
パー セン ト を 含む 値 を 指定 する 場合 は 、 5 m mn 


スタ イル シー ト を 利用 し まし ょ 3 う 5 I リー と は まき を な い 


| ME SUO NYPD 


く !DOCTYPE htmL> 
<htmt tang="]a"> 
<head> し 
<meta charset=Wutf-8 リ > 

<titte> イ ン ラ イン フレ ー ム の サイ ズ を 指定 する </t1tLe> 

</head> 

<body> 

<d1v><1frame src="C99_93_1frame.htmL" width="400" height="399></d1V> 
</body> 

</htmLt> 


レル 4 


ら る eeeo% ぁ 
イン ライ ン フ レー ム 内 の リン ク 表 示 先 指定 
構 | 


<a href=" 供 " target=" 全 "> 圏 </a> 


@ … リン ク 先 URL 
人 … 任意 の 名 前 、 も し く は キー ワー ド | 
| 左 … テキ スト 、 イ ンタ ラク ティ ブ ・ コ ン テ ン ツ 以 外 の 要素 | 


H 
T 
M 
L 
リ 
フ 
ア 
レ 
シ 
ス 


HI 


iframe 要 素 内 に 表示 し た ペー ジ の リン iframe 要 素 内 に さら に iframe 要 素 を 表 
ク を クリ ッ ク す る と 、jframe 要 素 内 で ペー 示し た 場合 、_top を 指定 する こと で ペー 
ジ を 移動 し ます 。 ジ 全 体 に リン ク 先 を 表示 で きま す 。 

リン ク を クリ ッ ク し た と き に ペー ジ 全 サン プル は iframe 要 素 内 に 表示 する 
体 に リン ク 先 を 表示 する に は 、a 要 素 の ペー ジ で す 。 
target 属 性 に 下記 の いずれ か の キー ワー 
ド を 使用 し ます 。 

・ _parent… 親 ウイ ンド ウ で 表示 ブラ ウザ 表示 


- _top… 一 番 上 の レベ ル の ウイ ンド ウ で 
表示 


_parent と _top の 違い は 、_parent 
が ひと つ 上 の 親 で 表示 する の に 対し て 、_ 
top は 親 の 入れ 子 が いく つめ あっ て も 一 番 上 
の 親 の ウイ ンド ウ で 表示 する こと で す 。 


<!DOCTYPE htmL> 
<htmt Lang="]a"> 
< く head> AN ノ 
< く meta charset=Wutf-8 リ > 

<titte> イ ン ラ イン フレ ー ム 内 の リン ク 表 示 先 指定 </t1tte> 

中 昭 」 

、 </head> 

」 <body> | 
| 
<p><a href="。。/]ndex.htmU' target="_parent"> 親 ウイ ンド ウ に ペー ジ 一 覧 を 表示 </a><br> 

<a href="../1ndex.htmL">1frame 内 に ペー ジ 一 覧 を 表示 </a></p> 

く </body> 

</htmt> 


こ 
お ) リン ク 先 を 新しい ウイ ンド ウ で 開く (P.94) i 123 
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フォ ー ム は 、 ユ ー ザ ー か ら の 入力 を 受け 付け る Web ペ ー ジ 内 の 部 品 で す 。 例 えば 、 


twitter や facebook な どの Web サ ービス で コメ ント を 入力 する と き に 利用 する 部 分 で 


す 。 


ユー ザー は 、 フ ォ ー ム に 様々 な 情報 を 入力 し て サー バ に 送信 する こと で 、 サー バ 上 の プ 


中 フォ ー ム の 基本 構成 


グラ ム を 使っ て デー タ を 保存 ・ 表 示さ せる こと が で きま す 。 


フォ ー ム の 基本 構成 は 「 フ ォ ー ム の 枠 | 「 入 力 項目 ] 「 送 信 ボ タン ] の 3 つ で す 。 
「 フ ォ ー ム の 枠 ] は form 要 素 に な り ま す 。form 要 素 が あめ る こと で 、 ペ ー ジ 内 に フォ ー 
ム が ある こと を 示し ます 。 ユーザ ー か ら の 入力 を 受け 付け る 要素 は 、form 要 素 の 中 に 配 


を 使い ます 。 


中 入力 頂 目 の 種類 


男 


置 さ れ て form 要素 と 関連 付け られ ます 。 
「 入 力 項 目 ] の 多く は 、input 要 素 、textarea 要 素 、select 要 素 な どの 入力 用 の 要素 


主 な 入力 項目 と し て は 、 下 記 の も の が あり ます 。 


1 行 の テキ スト 入力 


[送信 ボタ ン 」 は 、input 要 素 の type 属 性 に submit を 指定 し た も の に な り ま す 。 


Tnput NR 1f 」 
type="passwordl パス ワー ド 入 力 ER LU 細 旨 還 還 凍 | 
type="checkbox" 複数 の 項目 選択 ロ 複 数 の 項目 選択 
type="radio" 単 一 の 項目 選択 〇 単 一 の 項目 選択 
type="fite" ファ イル 選択 | ファ イル を 選択 | 選択 され て いま せん 
type="subm1t" 送信 ボタ ン 1 開 
type="1mage" 画像 の 送信 ボタ ン 
type="reset" リセ ッ ト ボ タン | リセ ッ ト | 
type="button" 単なる ボタ ン | 単なる ボタ ン ] 
type="hidden" 隠し 項目 

seLect, opt1on ドロ ッ プ ダウ ン リ スト | ドロッ プ ダ ウン リス ト * | 

[agozrxLA タ | 
texarea 複数 行 の テキ スト 入力 ーー ツア 
凡 | 
button 要素 を 内 包 で きる ボタ ン | gaen も 由 


2 


HTML5 で は この 他 に も 多く の 入力 項目 が 追加 され て いま す 。 


昌 頂 目 名 と 値 


ブラ ウザ で 表示 する 項目 名 は 、label 要 素 や fieldset 要 素 内 の legend 要 素 で 示す こと 


が で きま す が 、 サ ー バ に 送信 する 項目 名 は name 属 性 の 値 を 利 


し ます 。 


また 、 サ ー バ に 送信 する と き に は 、name 属 性 と と も に value 属 性 の 値 を 使 


H し ます 。 


テキ スト 入力 を させ る 項目 で は 、 入 力 さ れ た テキ スト が value 属 性 に 入り ます 。 選択 肢 か 


ら 選 所 項目 で は 、value 属 性 の 値 を 設定 し て お く 必 要 が あり ます 。 


<!DOCTYPE htmt> 

<htmt tang=!a リ > 

<head> 世 党 軸 </head> 

<body> 

<form action="/ method='"get' name="form_user"> % 
<p><tabet> お 名 前 : <Tnput name="user_name"></tabet></p>. 
<p><Labet> 住 所 : <1nput name="user_address"></tabel></p> 
<p><tabet> 電 話 番号 : <1nput name="user 097 
<p><input type=V'subm1t"></p> 

く /form> 

</body> 8 1 

</htmt> 1 


住所 :[ 


電話 番号 : 


at 


[ 送 】 
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@@@@O す @ 


フォ ー ム の 基本 的 な 設定 を する 


構 


に -。 <form action=" 坦 "method=" 全 "> 圏 </form> 


価 入力 デー タ の 送信 先 
全 … 入力 デー タ の 送信 方 法 
菩 … 入 力 項目 


フロ ー・ コ ン テ ン ツ ( 子 参 に form 要素 を 含め な い ) | 


form 要素 は 、 テ キス ト 入 力 や 選択 項目 
な どの フォ ー ム 関連 要素 の 集まり を 示し ま 
す 。 

action 属 性 は 、 入 力 デ ー タ の 送信 先 
URL を 示し ます 。 一 般 的 に は 、 入 力 デ ー 
タ を 処理 する サー バ 側 の ファ イル URL を 
指定 し ます 。 


: get… 送 信 先 URL に 入力 デー タ を 付加 
し て サー バ に 送る 方 法 

= post… 送 信 先 URL に 入力 デー タ を 付加 
し な いで サー バ に 送る 方 法 


form 要 素 の 内 容 ( 圏 の 部 分 ) に は 、 
input 要 素 、textarea 要 素 、select 要 素 


method 属 性 は 、 入 力 デ ー タ の 送信 方 
法 を 示し ます 。 指定 で きる 値 は 以下 の と お 
り で す 。 


な ど 、 ユ ー ザ ー が デー タ を 入力 する 要素 や 、 
サー バ に デー タ を 送る た め の 送信 ボ タン を 
記述 し ます 。 


< く !DOCTYPE htmL> 
<htmt tang=!a"> 
| <head> 
」 <meta charset= リ Wutf-8 リ > 
| <titte> フ ォ ー ム の 基本 の 設定 を する </t1tte> 
</head> 
く body> 
| <form actjon="/ method=!get"> 
| <p><Labet> ハ ムラ ビ 法 典 制定 を 説明 し な さい <br> 
| <1nput name="answer"></tabet></P> 
< く p> く 1nput て ype=!'subm1t"> く /p> 
</form> 
」 </body> 
| </htmt> 


| 
( 


ーーーーーーーーーー ーー mv 


いい em ゃ 5 で : ち 陸 第 ) 語 | 


| ハム ラビ 法典 制定 を 説明 し な さい 


| ーー | 
[ 基 


126 


@ の @@@0『@ 


フォ ー ム か ら デ ー タ を 送る と き の 形 式 を 指定 する 


an 


<form enctype=" 電 "> 人 </form> 


価 … デー タ 送 信 時 の MIME タ イプ 
全 … 入力 項目 


Mi 


form 要 素 の enctype 属 性 は 、 デ ー タ 
送信 時 の MIME タ イプ を 示し ます 。 こ 
の 属性 は 、form 要 素 の method 属 性 に 
post が 指定 され て いる と き に 利用 し ます 。 
指定 で きる 値 は 以下 の と お り で す 。 


- apPplication/x-www-form- 
urlencoded…URL エ ンコ ー ド で 送信 。 
すべ て の 文字 を エン コー ド す る 。 

- multipart/form-data… マ ル チ バ パー ト 
デー タ と し て 送信 。 EE ジコ ゴー ド し な い 。 
ファ イル 、 バ イナ リ デ ー タ を サー バ に 
送信 する 場合 に 使用 し ます 。 


| サッ プル ソー メス 剛 議 還 


、 <!DOCTYPE htm> 

| <htmL tang="]a"> 

、<head> | 

、 く meta charset=Wutf-8"> 

| | <titte> フ ォ ー ム か ら デ ー タ を 送る 時 の 形式 を 指 . 
定 する </titte> | 

| 

| </head> 

<body> 

8 

<form action="/! enctype="'appLicat1on/ 

1 | x-www-form-urtencoded"> 1 

| <p><Labet> ポ エニ 戦争 を 説明 し な さい <br> 

<input name=!『answer"></tabet></P> | 

、<p><fnput type="submit></p> 

| </form> 

</body> 

、 </htmt> 


エー エー ニー ニー ニー 


- text/plain… プ レー ン テ キ スト で 送信 。 
特殊 な 文字 は エン コー ド し な い 。 


enctype 属 性 が 指定 され て いな いと 
き の 値 は 、application/x-www-form- 
urlencoded に な り ま す 。 

フォ ー ム の デー タ に ファ イル を 含む 場合 
(input 要 素 type 属 性 に file を 指定 し た 
項目 が ある と き ) は 、multipart/form- 
data を 利用 する 必要 が あり ます 。 


ボ ュ ム に 昌 x 字 


ポエニ 戦争 を 説明 し な さい 


障 還 
@ 記号 や マー ク を 表示 する (P.44)、 フ ォ ー ム の 基本 的 な 設定 を する (P.126) 
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@@@ OO 


入力 チェ ッ ク を する か どう が 指定 する 


橋 


に <form novatidate> 坦 </form> 


倫 ・ フォ ー ム オブ ジェ クト 
(各種 入力 欄 や 選択 肢 な ど ) 


拓 


HTML5 新規 


0 め 


novalidate 属 性 は 、 入 力 チ ェ ッ ク を す 
る か が どう か を 示し ます 。 novalidate 必 性 
が ある 場合 は 入力 チェ ッ ク を せ ず 、 な いし) 場 
合 は 入力 チェ ッ ク を し ます 。 

サー バー 側 で 入力 チェ ッ ク を 行う た め ひ 、 
ブラ ウザ の 入力 チェ ッ ク が 不要 な と き や 、 
入力 チェ ッ ク の エラ ー 表 示 を カス タマ イズ 
し た いと き な ど に は 、novalidate 属 性 を 
使う と よい で し よう 。 

サン プル で は 、 form 要 素 に novalidate 
属性 を 指定 し 、 メ ー ル アド レス を 入力 する 
テキ スト ボッ クス を 配置 し て いま す 。 その 


<!DOCTYPE html> 


」 <htmt tang=『]a リ "> 
く head> 
| <meta charset="utf-8 リ > 


| <titUe> 入 力 チ ェ ッ ク を する か どう か 指定 する </t1tte> 


中 申 ] 

く </head> 

<body> 

中路 

<form action="/" novalidate> 
| <pz カ サエ ル の メー ル ア ド レス <br> 


<input type="ema1t'' name='"'ema11" required></p> 


<p>< く 1nput type="'submit リ ></p> 
く / form> 
く /body> 
く /htmt> 


た め 、 テ キス ト ボ ックス に メー ル ア ド レス 
で な い 値 が 入力 され て いれ ば 、 送信 ボタ ン 
クリ ッ ク 時 の 入力 チェ ッ ク で アラ ー ト が 表 
示さ れ ま す が 、 こ こ で は アラ ー ト が 表示 ご 
れ な いこ と が わか り ま す 。 


プラ ウザ 表示 


mrru 枝 時 和 上 


カサ エル の メー ル ア ド レス 


Rh、 


3 関連 
128 : @) フォ ー ム デー タ の 送信 先 が 異 な る ボタ ン を 作る (P.150) 


M 


G@@@0%@ 


H 
1 行 の テキ スト 入力 項目 を 作る 0 
昭 8 8 リ 
<input type="text" name=" 夫 "vatue=" 人 A" size=" 略 " ラフ 
maxtength=" 友 > レ 
代 … 入力 フィ ー ル ド の 名 前 (質問 項目 ) ス 
合 … 入力 欄 に デフ ォ ル ト で 表示 する 編集 可能 な テキ スト 
| 詳 … テキ スト ボッ クス の 横幅 
友 … 入力 で きる 最大 文字 数 


フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 、 内 包 で きる も の 華 コ 
イン タラ クティ ブ ・ コ ン テ ン ツ 
に デ 


type 属 性 に キー ワー ド text を 指定 し た 値 に 「textl を 指定 し て いま す 。 ま た 、 
Input 要 素 は 、1 行 の テキ スト が 入力 で き value 属 性 値 を 空 に し て いま す 。 その た め 、 
る 入力 項目 を 示し ます 。 値 が 空 の テキ ス ト ボ ックス が 表示 され て い 

name 属 性 は 、 デ ー タ を サー 條 に 送信 る こと が わか り ま す 。 
する と き の 項 目 名 を 示し ます 。 

value 属 性 は 、 入 力 欄 に デフ ォ ル ト で 表 
示す る 編集 可能 な テキ スト を 示し ます 。 

size 属 性 は 、 テ キス ト ボ ックス の 横幅 
を 示し ます 。 属 性 値 は 文字 の 数 に な り ま す 。 
maxlength 属 性 は 、 入 力 で きる 最大 文字 
数 を 示し ます 。 

サン プル で は 、 input 要 素 type 属 性 


ト 
| 


<!DOCTYPE htmt> 

<htmt tang="]a"> 
<head> 1 思 下 ト 

<meta charset=Wutf-8 リ "> キリ スト の 話 誕 を 説明 し な さい | 
<titte>1 行 の テキ スト 入力 項目 を 作る </tttte> | 
EE 測 当 </head> 

<body> | っ noe] 
| | | 聞 信 
」 <form act1on="/!> 
<p> く Labet> キ リス ト の 降誕 を 説明 し な さい <br> 和 gm 
| <1nput type="text" name=" answer" vatue="> く /1abet></p> 

<p> く 1nput type="Subm1t リ > く /p> 

く /form> 

</body> 

| </htmt> 


1 


@ ら eee@o@ 


H 
w 複数 選択 の 項目 (チェ ッ ク ボッ クス ) を 作る 
> 賠 | 
レ に 。 <jnput type="checkbox" name=" 坦 " vatue=" 全 " 
ス checked> 

信 項目 名 


人 る … サー バ に 送信 する デー タ 


イン タラ クティ ブ ・ コ ン テ ン ツ 


| 電 E 計 0 蘭 フロ ー コン テン ツ 、 フレ ー ジ ング コン テン ツ 、 人 EE まう 0 億 


type 属 性 に キー ワー ド checkbox を 指 スト で 記述 し まし ょ う 。 そ の 際 、input 要 
定 し た input 要 素 は 、 チ ェ ッ ク さ れ て いる 素 と 項目 名 の テキ スト を IaDel 要 素 で ま と 
状態 と チェ ッ ク さ れ て いな し 状態 の ふたつ め て 囲う と 、 チ ェ ッ クボ ックス を クリ ッ ク 
の 状態 を 示す 「 チ ェ ッ クボ ックス 」 を 表示 し た と きだ け で な く 、 項 目 名 の テキ スト を 
し ます 。 チェ ッ ク ボ ックス は 、 複 数 の 選択 クリ ッ ク し た と き に も 選択 / 非 選択 を 操作 
肢 を 選択 で きる 項目 に 利用 し ます 。 で きま す 。 

name 属 性 は サー 條 に 送る 項目 名 、 チェ ッ ク ボ ックス と 項目 名 の ラベ ル を 
value 属 性 は サー ババ に 送る 値 を が し ます 。 label 要 素 で まとめ て 囲 え な いと き は 、 

checked 属 性 は 選択 状態 を 示し ます 。 input 要 素 の id 属性 値 を label 要 素 の for 
checked 属 性 が な い 場 合 は 、 未 選択 状態 、 属 性 に 指定 する こと で 、 同 じ 操 作 が で きる 
を 示し ます 。 よう に な り ま す 。 

チェ ッ ク ボ ックス の 隣 に は 項目 名 を テキ 


| <htmt tang=" け a"> く head> | 
<meta charset="utf-8"!> ] 
<titte> 同 還 潮 < く /head> | 
| <body: 江 直良 1 
<form action= リ / リ > | 
<p> 選 択 肢 か ら 五 賢 帝 で は な い 項 目 を 選び な さい </p> 
」 <fietdset> 
<Uegend> 選 択 肢 </tegend> | 
<tabet><input type="checkbox" name="Wa リ 


| vatue="1" checked> ト ラ ヤ ヌス </1abe1> 1 選択 肢 か ら 五 賢 誰 で は な い 項 目 を 選び な さい 
</fietdset> | 選択 有 
<p><1nput て ype=""Subm1t"> く </p> | | コ トラ ヤ ヌ ス ロロ 人 ハドリアヌス 
」 < く /form> | ロロ シン ドウ ・ ヒ カル 
</body> 1 
| </html> | [ 
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2eweo*@ 
単 一 選択 の 項目 (ラジ オ ボ タ ン ) を 作る 


構 
px。 <1nput type="radio" name=" 電 " vatue="A" checked> 


価 … 項目 名 
人 る … サー バ に 送信 する デー タ 


二 E5 匠 フロー 」 コン テン ツ 、 フレ ー ジ ング コンテンツ 、 | EEE まさ 但 


イン タラ クティ ブ ・ コ ン テ ン ツ 
由 隔 は 
type 属 性 に キー ワー ド radio を 指定 し "る の か わか ら な い の で 、 ラ ジオ ボタ ン の 隣 
た Input 要素 は 、 チ ェ ッ ク さ れ て いる 状態 に は 項目 名 を テキ スト で 記述 し まし よう 。 
と チェ ッ ク さ れ て いな い 状 態 の た つの 状 その 際 、Input 要 素 と 項目 名 の テキ スト 
態 を 示す 「 ラ ジオ ボタ ン ] を 表示 し ます 。 を |abel 要 素 で まとめ て 囲う と 、 ラ ジオ ボ 
ラジ オ ボ タ ン は 、 複数 の 選択 肢 か ら 単 一 の タン を クリ ッ ク し た と きだ け で な く 、 項目 


選択 を する 項目 に 利用 し ます 。 名 の テキ スト を クリ ッ ク し た と き に も 選択 
name 属 性 は サー 人 バ に 送る 項目 名 、 / 非 選択 を 操作 で きま す 。 


value 属 性 は サー バ に 送る 値 を 示し ます 。 ラジ オ ボ タ ン と 項目 名 の ラベ ル を labe 
checked 属 性 は 選択 状態 を 示し ます 。 要素 で まとめ て 囲 え な いと き は 、input 要 

checked 属 性 が な い 場 合 は 、 未 選択 状態 _ 素 の id 属性 値 を label 要 素 の for 属 性 に 指 

を 示し ます 。 定 す る こと で 、 同 じ 操 作 を させ る こと が で 
ラジ オ ボ タ ン だ け 表 示し て も 何 を 選択 す きま す 。 


サジ ツ ヴ ル ツー ス 剛 


く !DOCTYPE htmt> 
<head> 計 当 </head> 
<body> 思 直 当 親 箇 xsu 
<form action=!/!> 
<p> 選 択 肢 か ら 黄 貼 の 乱 に 関係 の な い 項 目 を 選び な さい </p> 
<fietdset> 
<Legend> 選 択 肢 </tegend> 
< く Labet><input type="rad1o" name="a" vaLue= 
"1"> 張 角 </tabet> 選択 肢 か ら 次 巾 の 乱 に 関係 の な い 項目 を 選び な さい 
</fietdset> 過 択 肢 
< く p>< く 1nput て ype="'subm1 て "> く </p> | @ 張 久 〇 閣 競 つ 皇 南 高 | 
く </form> 
</body> | 若 


</htmt> 8 
\ 背 1 記 
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KK KJKUEDL) 


入力 内 容 が 隠さ れる 入力 欄 を 作る 


| <]nput type="password" name=" 坦 " vatue=" 全 " 


.。 size=" 略 " maxLength=" 衣 "> | 


介 項目 名 


ム 入力 欄 に デフ ォ ル ト で 表示 する 編集 可能 な テキ スト | 


| 園 … テキ スト ボッ クス の 横幅 
文 … 入力 で きる 最大 文字 数 


フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ コンテンツ 、 


イン タラ クティ ブ ・ コ ン テ ン ツ 


き | 


の 


サン プル で は 、input 要 素 type 属 性 値 


type 属 性 に キー ワー ド password を 指 
定 し た input 要 素 は 、 入 力 内 容 が 隠さ れる 
1 行 の テキ スト 入力 項目 を 表示 し ます 。 

name 属 性 は 、 デ ー タ を サー ババ に 送信 
する と き ぎの 項目 名 を 示し ます 。 

value 属 性 は 、 入 力 剛 に デフ ォ ル ト で 入 
力 し て お く 、 編集 可能 な テキ スト を 示し ま 
す 。 

size 属 性 は 、 テ キス ト ボ ックス の 横幅 
を 示し ます 。 属 性 値 は 文字 の 数 に な り ま す 。 
maxlength 属 性 は 、 入 力 で きる 最大 文字 
数 を 示し ます 。 


、 <!DOCTYPE htmt> 

<htmt tang="]a"> 
<head> 

<meta charset=Wutf-8 リ "> 


| <titte> 入 力 内 容 が 隠さ れる 入力 欄 を 作る </t1tLe> 


証 泊 </head> 
<body> 


、<form act1on="/!> 


<p> く 1nput type="Submit リ "> く /p> 
| </form> 
</body> 
、 </htmt> 


4 日 


に 「password」 を 指定 し て いま す 。 そ 
の た め 、 入 力 内 容 が 隠さ れる テキ スト ボッ 
クス が 表示 され て いる こと が わか り ま す 。 


ブラ ウザ 表示 


ミュ 』 の 和 す ョ 3 く 心 い 


ミラノ チョ コ プ レ ゼン トキ ャ ン ペ ー ン の パス ワー ド | 


| Ss ー 


| 


N 


<p><Labet> ミ ラノ チョ コ プ レ ゼン トキ ャ ン ペ ー ン の パス ワー ド <br> 
<input type="password"' name="password"> く </ tabe1> く </p> 


1 


@eleelo*@ 


ファ イル を 選択 する 項目 を 作る 


構 


・。 <]nput type="fite" name= リ 本" vatue=" 全 "muttipte> 


人 … 項目 名 


全 … 入力 欄 に デフ ォ ル ト で 表示 する 


編集 可能 な テキ スト 


フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 、 


イン タラ クティ ブ ・ コ ン テ ン ツ 


内 包 で きる も の 語 コ | 


type 属 性 に キー ワー ド file を 指定 し た 
input 要 素 は 、 サ ー バ に 送信 する ファ イル 


力 し て お く 編 集 可能 な テキ スト を 示し ます 。 
multiple 属 性 は 、 ひ と つ 以 上 の 値 を 指 


の ファ イル パス を 入力 する 項目 を 表示 し ま 
す 。 

「 フ ァイル 選択 ] ボ タン を クリ ッ ク す る と 、 
ファ イル 選択 用 の ウイ ンド ウ が 開き ます 。 
その ウイ ンド ウ 内 で ファ イル を 選択 し て 
「 開 く 」 ボタ ン を クリ ッ ク す る と 、 value 
属性 に ファ イル パス が 入力 され ます 。 

name 属 性 は 、 デ ー タ を サー 人 ババ に 送信 
する と き の 項 目 名 を 示し ます 。 

value 属 性 は 、 入 力 欄 に デフ ォ ル ト で 入 


く !DOCTYPE html> 
<htmt tang="]a"> 
、 <head> 
<meta charset=Wutf-8> 
<titte> フ ァイル を 選択 する 項目 を 作る </titte> | 
</head> 
<body> 
< く form action= リ "/ リ > 
<p><tabet> サ フラ ン を 食べ た 画像 の アッ プロ ー 
く br> 
<1nput type="f1Le" name="saffron_ fiten 
muttipte></ tabet> く </p> 
く p> く 1nput type="'subm1t"> く /p> 
| </form> 
く /body> 
< く /htmt> 


定 で きる こと を 示し ます 。type 属 性 に キー 
ワー ド file を 指定 し た Input 要素 で は 、 フ ァ 
イル 選択 用 の ウイ ンド ウ で 、 複 数 の ファ イ 
ル を 選択 で ざる よう に な り ま す 。 ひ と つの 
項目 の み 指定 で きる よう に する と き に は 、 
multiple 悦 性 は 削除 し まし ょ う 。 


サ ィ ラン 急 む う 国 建国 


サフ ラン を 食べ た 画像 の アッ プロ ー ド 
| ファ イル 選択 | 選択 され て いま せん 
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elwlelolia 
入力 内 容 に 応じ た 入力 柚 を 作る ① 


| |<input type="tet" name=" 坦 ! vatue=" 全 > 

。。 <input type="'search" name=" 二 "vatue=" 合 "> 
<nput type="urt' name=" 人 "vatue=" 全 > 
@ … 入力 フィ ー ル ド の 名 前 (質問 項目 ) 


人 … 入力 欄 に デフ ォ ル ト で 表示 する 
編集 可能 な テキ スト 


日 
T 
M 
L 
リ 
フ 
ア 
レ 
ン 
ス 


フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 、 


イン タラ クティ ブ ・ コ ン テ ン ツ 空 | 

H 上 AS HB 
type 属 性 に tel を 指定 する と 、 電 話 番 る と き に 使う の が 適切 で す 。 ブ ラウ ザ に 
号 の 入力 欄 に な り ま す 。 よっ て は 、 両 脇 が 丸く な っ た テキ スト ボッ 


Android、[OS で は キー ボー ド が 数 字 クス が 表示 され ます 。 ま た 、 入 力 時 に は 右 
を 入力 する 状態 に な り ま す 。 電話 番 号 は 端 に 値 の リセ ッ ト 用 の [X] ボタ ン が 表示 
様々 な 記述 方 法 が ある た め 、 入 力 内 容 に され ます 。 
制限 は あり ませ ん 。 制限 を つけ る に は 、 type 属 性 に url を 指定 する と 、URL の 


pattern 属 性 を 利用 する こと が 推奨 され て 入力 欄 に な り ま す 。 

いま す 。 入力 内 容 が http:// か ら 始ま る フル パス 
type 属 性 に search を 指定 する と 、 検 の URL で な い 場 合 、 ブ ラウ ザ に よっ て は 

索 キ ー ワ ー ド の 入力 欄 に な り ま す 。 送信 ボタ ン を クリ ッ ク し た と き に エラ ー 


入力 され た 値 を も と に 検索 結果 を 表示 す メッ セー ジ が 表示 され ます 。 


| サン フル ソー ス 壮 識 ] 
<!DOCTYPE html> 
<htmt tang="]a"> 
<head> 記 還 : 放 /head> 
<body> 放 鞍 当 ] 
< く form action="/ リ > 
<p><tabet> 電 話 番号 : 
<input type="teL' name="tet" 
vatue="!99912345678"></tabe1></p> 
<p><Labet> フ リー ワー ド : | 
<input type= リ "search'' name="search" 電話 番号 : nggz34ss7s 1 tel 
value=" カ ー ル の 載 冠 "></tabet></p> EE 
<p><tabet>web サ イト : フリ ー ワ ー ド : カー ル の 旧 天 
<1nput type="urt' name="urt" es ーーーー カ 
vatue="http://"></tabet> く </p> | の まかせ と 個 細 名 
<p> く 1nput type="Subm1t リ > く </p> 送 坊 | 
に 74 CE2 昌 BRSIEHSIEIERBISHHHEHRRHIER 和 EEE 還 議 議 氷水 泊 
</body> 
</htmt> 


h-!L の 所 イカ ン 


8 関連 
134 : @ テキ スト の 入力 を 制限 する (P.154) 


10 * 間 23 ま を 51 
@ ぢ | る g に リリ 臣 レフ キ type="number" の み 未 サポ ー ト 


入力 内 容 に 応じ た 入力 欄 を 作る ② 


< く 1nput type="ema1t' name=" 人 "vatue=" 全 "> 
ps < く 1nput type="number" name=" 坦 "vatue=" 全 > 
<input type="range"' name=" 久 "vatue=" 人 "> 
⑯ 入力 フィ ー ル ド の 名 前 (質問 項目 ) 
人 … 入力 欄 に デフ ォ ル ト で 表示 する 


編集 可能 な テキ スト 


フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ コンテンツ 、 


| イン タラ クティ ブ ・ コ ン テ ン ツ 
に 


内 包 で きる も の コ 


type 属 性 に email を 指定 する と 、 メ ー 
ル ア ド レス の 入力 欄 に な り ま す 。 

Android、IOS で は キー ボー ド が 英 数 
字 を 入力 する 状態 に な り ま す 。 また 、 入 力 
内 容 が メー ル ア ドレ ス の 形式 で な い 場 合 、 
ブラ ウザ に よっ て は 送信 ボタ ン を クリ ッ ク し 
た と き に エラ ー メ ッ セ ー ジ が 表示 され ます 。 

type 属 性 に number を 指定 する と 、 数 
値 の 入力 欄 に な り ま す 。 

この 指定 は 、1、2、3… と 連続 し た 数 字 
の 中 か ら 選 択 す る 場合 に 適し て いま す 。 そ 
の た め 、 ク レジ ッ ト カ ー ド や 郵便 番号 な ど 


く !DOCTYPE htmt> 
<htmt tang="a"> 
| <head> 攻 肖 : 対 /head> 
| <body> 民 癌 肖 
| <form act1on="/ リ > | 
<p> く Labet> メ ー ル アド レス : 1 
| <1nput type="emait' name="ema1t"> 
| </tabet></p> 
<p><Labet> 気 志 園 の メン バー の 数 : 
<1nput type="number" name="member『' 
vatue="W> く / tabe1t> く /p> 
<p><Labet> 音 の ボリ ュー ム : 
<]nput type="range"' name="votume" 
vatue="20"></tabet> く </p> 
く p> く 1nput て type= リ "submit"> く /p> 
く / form> 
</body></htmt> 


の 入力 に は 適し て いま せん 。 ブ ラウ ザ に 
よっ て は 、 通 常 の テキ スト ボッ クス の 右端 
に 数 値 を 足し た り 、 減 らし た りす る イン 
ター フェ ー ス が 表示 され ます 。Android、 
iO5 で は キー ボー ド が 数 字 を 入力 する 状態 
に な り ま す 。 
type 属 性 に range を 指定 する と 、 あ る 
範囲 内 の 数 値 の 入力 欄 に な り ま す 。 

この 指定 は 数 値 を 指定 し ます が 、 正 確 な 
数 値 は 重要 で は な いと き に 使用 し ます 。 ブ 
ラウ ザ に よっ て は 、 横 長 の ゲー ジ 内 の ポイ 
ンタ ー を 左右 に ずら す イ ンタ ー フ ェ ー ス が 
表示 され ます 。 


ド ィ ツ 松 き 中 団結 記 
ュ ン ズバ _ の 


メー ル ア ド レス :[。  、j、』 email 


気 志 園 の メン バー 数 :「 。 


音 の ボリ ュー ム : ーー ニー 是 
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日 
T 
M 
L 
リ 
フ 
ア 
レ 
ン 
ス 


@ ら @@@O@ 


H 
ラー ーー 
M 補 数 行 の テキ スト 入力 項目 を 作る 
リ 
ラフ 。 <textarea cots=" 電 " rows=" 全 " nane=" 較 
レ 。 maxLength=" 友 > 金 </textarea> O | 
ス ⑯ 1 行 に 入る 最大 文字 数 旨 間 凍 
詳 … 入力 フィ ー ル ド の 名 前 (質問 項目 ) 
訪 … 入力 で きる 最大 文字 数 
K 】 


| ・ 入力 欄 に デフ ォ ル ト で 表示 する 編集 可能 な テキ スト 
1 
の 聞 コン テン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 、 EE まま 330 伸 テキ スト 


イン タラ クティ ブ ・ コ ン テ ン ツ 


textarea 要 素 は 、 複 数 行 の テキ スト 入 サン プル で は 、textarea 要 素 を 配置 し 
力 欄 を 示し ます 。 要素 の 内 容 は 、 テ キス ト て いま す 。 その た め 、 複 数 行 の テキ スト 入 
入力 欄 に デフ ォ ル ト で 表示 する テキ スト に 力 項 目 が 表示 され て いる こと が わか り ま 
な り ま す 。 記述 し た テキ スト は 、 改 行 が め す 。 

れ ば br 要素 が な く て も 改行 が 表示 され ま 


cols 属 性 は 、1 行 に 入る 最大 文字 数 を 
示し ます 。 
OWS 属 性 は 、 表示 する 行 数 を 示し ます 。 
name 属 性 は 、 デ ー タ を サー バ に 送信 
する と き の 項 目 名 を 示し ます 。 


サザ ツル mm 災 


| <!DOCTYPE htm1> ゾラ ウザ 表示 


ィ イ ギ い ス e 矢 BK 時 字 


<htmt tang="]a"> 

<head> 

< く meta charset=Wutf-8"> 

<titte> テ キス ト 入 力 で きる 複数 行 の 欄 を 作る </titte> 
/head> 

<body> 

<form act1on="/!> 

| <p> く Uabet> イ ギリ ス 農 民 戦 争 を 説明 し な さい <br> 
<textarea cots=30" rows="19" name=!'answer リ > 
</textarea></ tabet></p> 

<p><1nput type=!'subm1t"></p> | | 
く /form> 

</body> | 


</htmt> 


136 


ii ma as ーー ュー 0 ーー ニニ ーー に 
5t 


の G@@@0『@ 
ドロ ッ プ ダウ ン リ スト を 作る 


, <setect name=" 夫 "> 
by <option vaLue=" 全 ! setected> 較 </option> 
く / seLect> 


便 … 入力 フィ ー ル ド の 名 前 (質問 項目 ) 
合 … サー バ に 送信 する デー タ 
詳 … ブラ ウザ に 表示 され る 選択 項目 
| 才 二 呈 議 Select 要素 フロ ー・ コ ン テ ン ツ 、 フ レー ジン グ ・ 弦 EE ま 記 2 唱 ・select 要 素 0 個 以上 の 


ロコ シテ ジ ツ ミイ ンタ ラク デキ ブー コジ シテ ジ ツ Option 要素 、optgroup 要素 
・option 要素 な し ・Option 要素 テキ スト 


日 
T 
M 
に 
リ 
プ 
4 
レ 
ン 
ス 


MG 


select 要 素 は 、 表 示さ れ た 項目 か ら 選 サン プル で は 、select 要 素 を 配置 し て 
択 を 行う | ドロ ッ プ ダウ ン リ スト 」 を 示し いま す 。 ま た 、select 要 素 内 の 「 選 択 し 
ます 。 て くだ さい | と いう テキ スト が 入っ て い 
name 属 性 は サー 人 ババ に 送る 項目 名 、 る option 要 素 に selected 属 性 を 指定 し 
value 属 性 は サー 人 バ に 送る 値 を 示し ます 。 て いま す 。 その た め 、「 選 択 し てく だ さい 
selected 属 性 は 、 選 択 状態 を た 示し ます 。 が 選択 され た 状態 で ドロ ッ プ ダウ ン リ スト 
selected 属 性 が な い 場 合 は 未 選択 状態 を が 表示 され て いる こと が わか り ま す 。 
示し ます 。 


サジ ザル ソー スズ 
く !DOCTYPE htmt> 
<htmt tang="ja"><head> 甘 潮 注 </head> 
<body> 江 当 
<form act1on="/ リ "> 
<p> ば ぱら 戦争 の 発生 国 を 選択 し な さい <br> 
< く setect name="anSwer リ > 
<option vatue="' setected> 選 択 し て くだ さい 
</opt1on> 
<option vatue=W1 り > イン グラ ンド </opton> 
<option vatue="2"> ウ ェ ル シュ ・ ケ ー キ </ 
OptTon> 
<option vatue="3"> カ レー ライ ス </option> 
</'setect></p> 
く p> く 1nput て type="'Subm1t"> く /p> 
く /form> 
</body> 
</htmt> 


| ば ら 戦争 の 発生 国 を 選択 し な さい 
| 選択 し て くだ さい s| 


G@⑥@@0 生 @ 


H 
MM 介 aa 時 
ドロ ッ プ ダウン リ スト 内 を 一 覧 で 表示 する 
1 
ラ | <setect name=" 坦 "sjze=" 全 "> 
レ 六 <option vatue=" 較 "> 廊 </opt1on> 
ス く </ setect> 
但 入力 フィ ー ル ド の 名 前 (質問 項目 ) 
合 … 表示 する 項目 数 
較 サー バ に 送信 する デー タ 
文 … ブラ ウザ に 表示 され る 選択 項目 


select 要 素 の size 属 性 は 、 表 示す る 項 "し て 見 る こと が で きま す 。 

数 を 示し ます 。 サン プル で は 、size 属 性 を 「4」 に 指定 

size 層 性 を 指定 する と 、 縦 に 表示 エリ し た select 要 素 を 配置 し て いま す 。 そ の 

ア が 広がり 、 項 目 を 一 覧 で きる よう に な り た め 、 選 択 肢 が 4 つ 表 示さ れ た 状態 の 選択 

ます 。 ] 項目 が 表示 され て いる こと が わか り ま す 。 
隠れ て いる 項目 は スク ロー ル バ ー で 移動 


PP 4 提 HETDRBERIEH3EEH 出 


| <!DOCTYPE html> 

<htmt tang="a"><head> 世 店 : 訳 /head> 

<body><form action= リ / リ > 

<p> 宗 教 改革 に 関連 する 項目 を 選択 し な さい <br> 

<setect name="answer!! s1ze=4 リ > 
<opt1on vatue=" setected> 選 択 し て くだ さい </option> | 
<option vatue='1"> ル ター の 財 春 状 批判 </opton> | 
<option vatue="2"> プ ロ テ ス タン ト の 分 難く </opt1on> | 


Co Certsogria の 2irtior 記章 間 
く / setect> く </D> | 


<p><1nput type="'Subm1t"> く /p> | | 
| </form> 1 33 志 か 0 
</body> | HH 0 Th る 者 く e 
く /htmt> y 
宗教 改革 に 関連 する 項目 を 選択 し な さい 
| 選択 し て くだ さい ] 
ルター の 朋 震 批判 1 
| テス タン ト の 分 | 
| | 軒 字 英 活 動 | | 
| | | 
] 
| 
| 半 
138 : で ドロ ッ プ ダウ ン リス ト を 作る (P.137) 


2.2 5.1 


2ee@e0# る 
ドロ ッ プ ダウ ン リ スト 内 を グル ー プ 化す る 


|<setect name=" 夫 "> 
文 <optgroup Label=" 全 "> 
<option vatue=" 略 "> 支 </option> 
く /optgrouD> 

く /setect> | 
・ 入力 フィ ー ル ド の 名 前 (質問 項目 ) 
・ グル ー プ 名 
・ サー バ に 送信 する デー タ 
- ブラ ウザ に 表示 され る 選択 項目 


| 
M 
L 
り 
フ 
ア 
レ 
ン 
ス 


直 園 P 人参 


・optgroup 要素 な し に に 3 は ptgroup 要素 0 個 以上 の ption 要素 


optgroup 要 素 は 、 共 通 の 項目 名 を も っ の た め 、 ド ロッ プ ダ ウン リス ト の 項目 に グ 
た option 要 素 の まとまり を 示し ます 。 ルー プ 名 が 表示 され て いる こと が わか り ま 
label 属 性 は 、 グ ルー プ 化 し た option 。 す 。 
要素 の まとまり の 名 前 を 示し ます 。 
label 属 性 の 属性 値 は 、select 要 素 の 一 
覧 内 に グル ー プ の 区 切り と し て 表示 され ま 
す 。 
サン プル で は 、 項 目 に optgroup 要 素 


を 含む select 要 素 を 配置 し こい ます 。 そ 本 EC 
| te 析 


| <IDOCTYPE htmt> 
<htmt tang="]a"> 
<head> 諾 計 : 計 /head> | 四 
<body> 攻 潮 当 | 
< く form action="/!"> 
| <p> く Labet> ド イツ の 行政 区 分 <br> 
| <setect name="Land"> 

<option vatue=" setected> 選 択 し て くだ さい </option> 

<optgroup tabet=" 都 市 州 "> 

<option vatue="191"> ベ ルリ ン </option> 

く /optgroup> | 
| 
</setect></ tabet> く </p> 
| <p> く 1nput て ype="!Subm1t"> く /p> 
| </form> 
</body> 
</htmt> 
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aeeweo ぁ 
リス ト 内 を グル ー プ 化し て 一 覧 で 表示 する 


| <setect name=" 鍛 " s1ze=" 全 "> 
層 <optgroup tabet=" 較 "> 
<option vaLue=" 衣 "> 金 </option> 
< く /optgrouD> 
< く /setect> 


入力 フィ ー ル ド の 名 前 (質問 項目 ) 
… 表示 する 項目 数 

・ グル ー プ 化し た 項目 名 

… サー バ に 送信 する デー タ 

・ ブラ ウザ に 表示 され る 選択 項目 


H 
T 
M 
L 
リ 
フ 
P 
レ 
ン 
ス 


信 オキ 因 @ 


select 要 素 の size 属 性 と optgroup 要 optgroup 要 素 は 、 共 通 の 項目 名 を も っ 
素 を 利用 する と 、 選 択 項目 を 一 覧 表示 し な た option 要 素 の まとまり を 示し ます 。 
が ら 、 同 時 に グル ー プ 化し た 項目 を 表示 す label 属 性 は 、 グ ルー プ 化 し た optlion 
る こと が で きま す 。 要素 の まとまり の 名 前 を 示し ます 。 

size 属 性 を 指定 する と 、 縦 に 表示 エリ label 属 性 の 属性 値 は 、select 要 素 の 一 
ア が 広がり 、 項 目 を 一 覧 で きる よう に な り 覧 内 に グル ー プ の 区 切り と し て 表示 され ま 
ます 。 す 。 

隠れ て いる 項目 は スク ロー ル バ ー で 移動 
し て 見 る こと が で きま す 。 


サン プル ソー ス N 


く !DOCTYPE htmt> 
<htmt tang="ja"><head> 攻 計 /head> 
<body 江 小 清 
く form action="/!> | 
<p><tabet> 三 十 年 戦争 の 勢力 で な いも の を 選択 し な さ | 
い <br> | 
<seLect name="answer リ sze="5 リ > 

<option vatue=' setected> 選 択 し て くだ さい 
く /opt1on> 

<optgroup Labet=" 新 教徒 勢力 "> 

<option vaLue="11"> ス ウェ ー デ ン </option> 


三 十 年 戦争 の 勢力 で な いも の を 選択 し な さい 

く /optgroup> 前 
中 星 | | スウ ェ ー デ ン 
1 | フラ シス = 

| <p> く input type="'subm1t"></p> | トーア ラサ ー 再 国 __ _ 
、 < く /form> | 居 太 ] 
| </body></htmt> - 半 信 

140 関連 ドド ロッ プ ダ ウン リス ト を 作る (P.137) 、 ド ロッ プ ダ ウン リス ト 内 を 一 覧 で 表示 する (P.138) 、 


ドロ ッ プ ダウ ン リ スト 内 を グル ー プ 化す る (P.139) 


2eeeo*@ 
非 表 示 の 項目 を 作る 


構 

"。 <1nput type="h1dden!"' name=" 信 "vatue=" 全 "> 
代 … 隠し フィ ー ル ド の 名 前 
人 る … サー バ に 送信 する デー タ 


H 
山 
M 
L 
り 
フ 
ア 
レ 
ン 
ス 


% 


type 属 性 に hidden を 指定 する と 、 ユ ー け サン プル で は 、 テ キス ト ボ ックス と 「1 


ザー に 編集 され る こと の な い 項 目 を 示し ま ぴゅ ー と 行っ て 、 リ ター ン す る 途中 の 項目 」 

す 。 の 間 に 、type 属 性 を 「hidden] に 指定 
name 属 性 は 、 デ ー タ を サー ババ に 送信 し た input 要 素 を 配置 し こい ます 。 その た 

する と き の 項 目 名 を 示し ます 。 め 、 そ の 要素 が 非 表 示 の 項目 と な っ て いる 
value 属 性 は 、 サ ー バ バ に 送信 する デー タ こと が わか り ま す 。 

を 示し ます 。 


この 項目 は 、HTML は 記述 され て いま 
す が 、 ブ ラウ ザ で は 表示 され ませ ん 。 その 
た め 、HTML ソ ー ス を 表示 する と 、 隠 し 
項目 の 項目 名 と 値 を 見 る こと が で き て し ま 
うた め 、 注 意 が 必要 で す 。 


lil 


SIDOCTYPE htmt> 
」 <htmt tang="]a"> 
<head> で ゃ 99ー ン 華人 銘 


「/2 


< く meta charset=Wutf-8"> Tn 
、 <titte> 非 表示 の 項目 を 作る </titte> / | 
甘 没 当 </head> ( (9 | 
| <body> 世 加 肖 


| <form act1on="/ リ > 

<p> く Labet> ピ ュー リタ ン 革 命 を 説明 し な さい <br> 

| <1nput name="answer1"></tabet></p> 

< く p>< く 1nput も type="hidden!" name="answer2"><br> 


1 びゅー と 行っ て 、 リ ター ン す る 途中 の 項目 </p> 本 

く p> く 1nput type="subm1t"></p> 

< く / form> 

< く /body> に = 

</htm い > 1 びゅ 一 と 行っ て 、 リ ター ン す る 途中 の 項目 


141 


ら 6eee@os@ る 
入力 内 容 を リセ ッ ト す る ボタ ン を 作る 


構 

、。 <1nput type="reset'' name=" 夫 "vatue=" 全 "> 
@ … ボタ ン の 名 前 
人 る … ボタ ン に 表示 する テキ スト 


H 
T 
M 
L 
リ 
フ 
4 
衣 
3 
し 3 


type 属 性 に キー ワー ド reset を 指定 し ます 。 
た input 要 素 は 、 入 力 フォ ー ム に 入力 され サン プル で は 、「 入 力 内 容 を リセ ッ ト す 
た テキ スト を リセ ッ ト す る た め の ボ タン を る ] と いう テキ スト の ボタ ン を type 属 性 
表示 し ます 。 を 「reset」 に 指定 し た Input 要素 で 配置 
name 属 性 は 、 ボ タン の 名 前 を 示し ます 。 し て いま す 。 その た め 、 ブ ラウ ザ で 表示 し 
value 属 性 は 、 ボ タン に 表示 する テキ スト た と き に 、 こ の ボタ ン を クリ ッ ク す る と 入 
を 示し ます 。 力 内 容 を リセ ッ ト す る こと が わか り ま す 。 
値 が 入っ て いな い テ キス ト ボ ックス を 編 
集 し て か ら 、 リ セッ ト す る ボタ ン を クリ ッ 
ク す る と 入力 し た 値 が 消え ます 。 また 、 最 | 


初 か ら 値 が 入っ て いる テキ スト ボッ クス を | よこ ) | 
編集 し て か ら 、 リ セッ ト す る ボタ ン を ク | 才 。 | 
リッ ク す る と 、 最 初 に 入っ て いた 値 に 戻り 《⑯ み ら 2 

| サン フル ソー ス 賠 の 


」 く !DOCTYPE htmtl> 
) <htmt tang="a"> 

<head> ピレネー 条約 を 説明 し な さい | 
<meta charset="utf-8!> | が 5 
<tite> 入 力 内 容 を リセ ッ ト す る ボタ ン を 作る </titte | ] 
E 山 に /head> 
| <body2 半 当 
<form action=!/"> | | 
| <p><Uabe> ビ ピレネー 条 約 を 説明 し な さい <br> ML 崩 
<1nput name="answer></tabet> く /P> 
<p><input type="submit"> <nput て ype="reset" vatue=" 入 力 内 容 を リセ ッ ト す る "></p> 
</form> 
| </body> 
| </htmLl> 


[ 送 呈 ] | 入力 内 容 を リセ ッ ト す る | 


142 


@G@@@0%@ 


入力 内 容 を 送信 する ボタ ン を 作る 


構 


<1nput type="subm1t" name=" 夫 "vatue= り "人!> 


介 … ボタ ン の 名 前 
合 … ボタ ン に 表示 する テキ スト 


type 属 性 に キー ワー ド submit を 指定 
し た input 要 素 は 、 入 力 フォ ー ム に 入力 さ 
れ た テキ スト を 、 サ ー バ に 送信 する た め の 
ボタ ン を 表示 し ます 。 

name 属 性 は 、 ボ タン の 名 前 を 示し ます 。 
value 属 性 は 、 ボ タン に 表示 する テキ スト 
を 示し ます 。 

け ン プル で は 、「 入 力 内 容 を リセ ッ ト す 
る 」 と いう テキ スト の ボタ ン を type 属 性 
を 「submit] に 指定 し た input 要 素 で 配 
置 し てい ます 。 その た め 、 ブ ラウ ザ で 表示 
し た と き に 、 こ の ボタ ン を クリ ッ ク す る と 


入力 内 容 を 送信 する こと が わか り ま す 。 


| ブラ ウザ 表示 


ザウ ツル 
| <!DOCTYPE html> 
」 <html tang=" け a"> 
| <head> 
| <meta charset=!utf-8 リ > 
| <titte> 入 力 内 容 を 送信 する ボタ ン を 作る </t1tte> 
| 


<form actjon= リ "/ リ > 
<p> く Labet> 名 誉 革命 を 説明 し な さい <br> 
<1nput name="answer"></tabet></p> 


</form> 
</body> 
く /htmL> 


<P> く input type="submit" vatue=" 入 力 内 容 を サー バ に 送信 する "></p> 


名 准 革 命 を 説明 し な さい 


ト pe 
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ら eee@Oo ぁ 
画像 を 用 いた 送信 ボタ ン を 作る 


橋 

文 <1nput type="'1mage" name=" 但 り src=" 合 " att=" 較 " 
width=" 廊 "height=" 念 "> 

- ボタ ン の 名 前 

… 画像 ファ イル の URL 

Nan22 人 NN 

… ブラ ウザ で 表示 させ る ボタ ン 画 像 の 幅 

・ ブラ ウザ で 表示 させ る ボタ ン 画 像 の 高 さ 


オ 男 > @ 


type 属 性 に キー ワー ド image を 指定 し わか り ま す 。 
た input 要 素 は 、 画 像 を 用 いた 送信 ボタ ン 
を 表示 し ます 。 

name 属 性 は 、 ボ タン の 名 前 を 示し ます 。 


srC 属 性 、alt 属 性 、width 属 性 、height rm pm 
属性 に つい て は 、img 要 素 と 同様 で す 。 
サン プル で は 、type 属 性 を 「image] 3 第 上 し る て り 休 約 | 
こ 指 定 し た input 要 素 を 配置 し て いま す 。 
その た め 、 ブ ラウ ザ で 表示 し た と き に 、 画 
像 の 送信 ボタ ン が 表示 され 、 こ の ボタ ン を 
クリ ッ ク す る と 入力 内 容 を 送信 する こと が 


<!DOCTYPE html> 
<htmt tang="]a"> 


」 <head> 
」 <meta charset="Iutf-8!> 
[ <titte> 画 像 を 用 いた 送信 ボタ ン を 作る </titLe> 


諾 半 :K/head> ] 画像 の 送信 ボタ ダン | 
SbodyyEH | | 
、<form act1on="/ リ > Se * 


、 <p><Labet> ユ トレ ヒト 条約 を 説明 し な さい <br> | 
<1nput type="text" name="answer></tabe1> く /p> 
<p><jnput type="image" src="btn.png" alt=!" 画 像 の 送信 ボタ ン リ "></p> 
</form> 
く /body> | 
、 </htmt> 


144 : 関 違 画像 を 挿入 する (P.106)、 画 像 が 表示 され な いと き の テ キス ト を 指定 (P.107)、 
ブラ ウザ 上 の 画像 サイ ズ を 指定 (P.108) 


2eeweo ぁ 
要素 を 組み 合わ せ た ボ タン を 作る 


構 
:。 <button type=" 坦 "name=" 人 "vatue=" 較 "> 衣 </button> 


価 … ボタ ン の タイ プ (submit、reset、button の いずれ か ) 
全 ボタン の 名 前 

圏 ・ サー バ に 送信 する デー タ 

直 … ボタ ン に 表示 する テキ スト や 画像 な ど 


| 才 E 訪 誠 蘭 フロ ー コン テン ツ 、 フ レー ジン グ - コンテンツ 、 EK まま 3 瘍 フレ ー ジ ング コンテンツ 


イン タラ クティ ブ ・ コ ン テ ン ツ (イン タラ クティ ブ ・ コ ン テ ン ツ は 除く ) 


/ 


button 要 素 は 、 要 素 の 内 容 ( 太 ) に 書 type 属性 を 記述 し な いと き は 、 キ ー ワ ー 


いた も の が ラベ ル に な る よう な ボタ ン を 示 ド submit を 指定 し た 状態 に な り ま す 。 


し ます 。 name 属 性 は 、 ボ タン の 名 前 を 示し ます 。 
type 属 性 は 、 ボ タン の 動き を 示し ます 。 value 属 人 栖 は 、 サ ー 人 ババ に 送信 する デー タ 


通 


属 作 値 に は 下記 の キー ワー ド を 指定 で きき を 示し ます 。 

す 。 

: submit… フ ォ ー ム の デー タ を 送信 する 
ボタ ン 

: reset… リ セッ ト ボ タン 

: button… 汎 用 的 な ボタ ン 


<!DOCTYPE htmt> 
<htmt Lang=!a"> 


命 を な さい | 
| <head> 産業 革命 を 説明 し こっ | 
」 <meta charset="utf-8 リ > 
| <ttte> 要 素 を 組み 合わ せ た ボ タン を 作る </titLe> Em ニー 昌 
力投 折 /head> | 回 

<body>E 涼 当 MM 合 
<form action=!/! ウ > 全く 名 導 か ら 送信 する | 
<p><Labet> 産 業 革命 を 説明 し な さい <br> 一 


<1nput type= り "text name='answer"> く / Labe1t></p> 
<p> く button も ype="button"><jmg src="btn_home.png" alLt="> く br> 
三 行書 く 名 湯 か ら 送 信 す る </button></p> 
</formz> 
| </body> 
| </htmt> 


ア 
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2 み 5.1 


26eeeo ゃ る 


フォ ー ム 部 品 の 項目 名 を 表す 


構 
、。 <Labet><input> 夫 </ tabet> | 
<jnput 1d=" 全 "><tabet for=" 全 "> 鍛 </tabel> 


但 項目 名 
全 … input 要 素 の id 属性 値 


H 
T 
M 
半 
リ 
コ 
誠 
レ 
深 
の 


フロ ー . コン テン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 、 フレ ー ジ ング ・ コ ン テ ン ツ (label 要素 と 
イン タラ クティ ブ ・ コ ン テ ン ツ 関連 付け られ た 要素 や Iabel 要素 は 除く ) 


label 要 素 は 、 フ ォ ー ム 部 品 の 見 出し を チェ ッ ク ボ ックス や ラジ オ ボ タ ン を 表示 
示し ます 。Iabel 要 素 の 内 容 に 記述 し た テ する input 要 素 と label 要 素 を 関連 付け る 
キス ト が 、 フ ォ ー ム 部 品 の 見 出し に な り ま と 、Iabel 要 素 内 の テキ スト を クリ ッ ク し 
。 刺 た と き に も 、 関 連 付け られ て いる input 要 

for 属 性 は 、label 要 素 が フォ ー ム 部 品 素 が 選択 状態 に な り 、 選 択 状 態 の 入力 が し 
と 関連 付け られ て いる こと を 示し ます 。 や すく な り ま す 。 

フォ ー ム 部 品 と label 要 素 を 関連 付け る 
方 法 は 、 以 下 の ぬ た つが あり ます 。 


:・ label 要 素 の for 属 性 の 値 と フォ ー ム 部 
品 の id 属性 の 値 を 同じ に する 
: label 要 素 の 中 に フォ ー ム 部 品 を 入れ る 


く !DOCTYPE htmt> | …- る H 

| <htmt tang="]a"> ae。 必 事 件 

| <head> 攻 軸 簡 /head> 

<body> 

<form act1on= リ "/ リ > 

<p><Labet> ボ スト ン 茶 会 事件 に 関連 する 項目 を 

| 選択 し な さい <br> 1 

<setect name="answer リ > 
<option> 会 社 の ボス </option> ] 
<option> や ん ちゃ な ギタ リス ト </option> | 
<option> サ ミュ エル ・ ア ダム ズ </option> | 


</setect> 
</1abet></p> 
< く p><1nput type="Subm1t"> く /p> 
く / form> 
</body></htmt> 
: 関連 - 
146 : で ) 選択 の 項目 (チェ ッ ク ボ ックス ) を 作る (P.130)、 単 選択 の 項目 (ラジ オ ボ タ ン ) を 作る (P.131) 


昌 ーー ピーコ ーー ーー RE ue 


@@lwl@O 章 あ 


H 
複数 の フォ ー ム 部 品 を まとめ る M 
.。 <fietdset> ラ 
、 <Legend> 電 </tegend> レ 
内 ス 

く </fietdset> 


介 … 複数 の 項目 を まとめ た 説明 文 


全 … グル ー プ 化す る 項目 
(| Teldset 可 素 フロ ー コンテンツ 、 馬 に ニン ・feldset 要素!egend 委 素 、legend 要素 の 後に 


セク ショ ニン グ ・ ル ー ト 続く フロ ー・ コ ン テ ン ツ 
・legend 要素 な し ・Ilegend 要素 フレ ー ジ ング ・ コ ン テ ン ツ 


fieldset 要 素 は 、 共 通 の 名 前 で ま と か り ま す 。 
め た フォ ー ム 部 品 の セッ ト を 示し ます 。 
fieldset 要 素 を 入れ 子 に する こと で 、 階 層 
を 作る こと も で きま す 。 

legend 要 素 は 、fieldset 要 素 が 作る 


計 Weyel ユー 間 人 0NNIIUIUIIU II 
サン プル で は 、 ラ ジオ ボタ ン を まとめ る 、 


た め に ieldset 要 素 を 指定 し 、「 デ カブ ツ ] ニョ 生生 

と いう テキ スト に legend 要 素 を 指定 し て 相 

いま す 。 その た め 、 ブ ラウ ザ で 表示 し た と 

寺 に 、 こ の 部 分 が 枠 で 囲 わ れ 、 見 出し と し | デカ ブリ スト の 乱 に 関連 する 項目 を 選択 し な さい 


デカ ブッ ーー デイ 
富士 山 〇 ナイ アガ ラ の 滝 〇 十 月 党員 | 


<!DOCTYPE html> 送信 | 
<htmt tang=!]a"> 和 


<head> 記 滞 当 </head> 
<body> 葉 直 肖 
<form act1on="/ リ "> 
<p> デ カブ リス ト の 乱 に 関連 する 項目 を 選択 し な さい </p> / 
<fietdset> 
<tegend> デ カブ ツ </tegend> 
<Labet><jnput type="radio" name="ar vatuue="1'"> 富士 山 </tabet> 
<Labet><input type="radio" name="a vatue="2> ナイ アガ ラ の 滝 </Labet> 
<tabet><input type="radio"' name="a vatue="3"> 十 二 月 党員 </tabet> 
く /fietdset> 
く p><1nput て type="'Subm1t!"></p> 
く /form></body></htmt> 
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る e@iwleol る 
入力 項目 を 自動 補完 する 


構 
、。 <input type=" 夫 "name=" 人 A" autocomptete="! 較 "> 
@ … 入力 フィ ー ル ド の 形式 

4 … 入力 フィ ー ル ド の 名 前 (質問 項目 ) el 

・ 自動 入力 の 設定 (on、off) 5 


KHR1 所 錠 
autocomplete 必 性 は 、 入 力 項 目 の グイ ン 用 の ID/ パ スワ ー ド な ど 「 使 いま わ 

動 補完 を する か どう か を 定義 し ます 。 毎回 さ な い 内 容 ] に 使用 し ます 。 

指定 で きる 属性 値 は 以下 の と お り で す 。 この 属性 は 、input 要 素 の type 属 性 が 


。 off… 自 動 補完 し な い (毎回 ユー ザー が text、search、url、te 


入力 ) 
: On… 自 動 補完 する 


[|、emal 
password、datetime、date、month、 
week、time、datetime-local、 


に 


: 記述 な し … フ ォ ー ム オー ナー の auto 
complete 属 性 を 使用 する (form 要 素 
の デフ ォ ル ト 設 定 は on) 


きま す 。 


autocomplete 属 性 値 の of は 、 ク レ | 
ジッ トカ ー ド 番号 、 ネ ッ ト バ ン キ ング の | 


く !DOCTYPE htmt> 

<htmt Lang="]a"> 

<head> ] 

<meta charset=Wutf-8 リ > | 

| <ttte> 入 力 項目 を 自動 補完 する </t1tLe> アヘ ン 戦 争 に 関連 する 国名 

| ae 
、 </head> | イギリス 

< く body> 


number、range、color の と き に 利 


h 
| 
8 


<form action="/"> 
<p><tabet> ア ヘン 戦争 に 関連 する 国名 を 答え な さい <br> 
<jinput type=" モ ext"' name="answer'' autocomp Lete="on"> く </tabet> く /p> 
」 <p><1nput type="Subm1t リ ></p> 
| </ form> 
</body> 
</htmt> 


: 関連 
148 : けら) テキ スト ボッ クス で 入力 候補 を 表示 する (P.156) 


elwlslol |。 
送信 時 に 入力 され て いる か チェ ッ ク を 行う 


構 
に 。 <]nput type=" 坦 " name=" 全 "vatue=" 較 "required> 
@ 入力 フィ ー ル ド の 形式 ペ 
今 … 入力 フィ ー ル ド の 名 前 (質問 項目 ) 
| 圏 … 入 力 欄 に デフ ォ ル ト で 表示 する 編集 
| 可能 な テキ スト 
| 


>2IN ぐ NN に ビ ミ ゴ エ 


eduired 属 性 は 、「 指 定 され た 項目 が 必 れる こと が わか り ま す 。 
すず 入力 され て いる 必要 が ある 項目 ] を 示し 
ます 。 

この 属性 は 、input 要 素 の type 属 性 が 
text、search、url、tel、email、pass 
word、 datetime、 date、 month、 week、 
time、datetime-local、number の と きこ と 、 
select 要 素 、textarea 要 素 に 利用 で きま す 。 


サン プル で は 、reduired 属 性 を 指定 し 
ブラ ウザ 表 : 
た input 要 素 を 配置 し て いま す 。 そ の た め 、 0 
ブラ ウザ で 表示 し た と き に 、 何 も 入力 し な | 
いで 送信 ボタ ン を 押す と アラ ー ト が 表示 さ 


サン ブル ソー ス | 議 叶 細 古 還 細 語 有 


く !DOCTYPE htmL> 
<htmt tang="]a"> 
<head> ] 
稚 公介 諾 TE だ 2 お po 遇 SNSHEHEREHHEBAHBHISHEH | 
<tjtte> 送 信 時 に 入力 され て いる か チェ ッ ク を 行う </t1tte> 固 92 の 5 ル の 89 宮 
7head> ーー 
< く body> 1 
Ei | 
く form acton=!/ リ > 9 ーーーーーーーー 
<p><tabet> 太 平 天国 の 乱 を 説明 し な さい <br> 
<1nput type=!' text “ name=answer" required></tabet> く </p> 
<P> く 1nput type="submit"> く /p> 
く /form> | 
く /body> | 
く /htmLt> 


太平 天国 の 乱 を 説明 し な さい 
ェ ーー 
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フォ ー ム デ ー タ の 送信 が 異な る ポタ ン を 作る 


構 
。 <form action=" 電 "> 


<1nput type=" 全 "formaction=" 較 "> 


く /form> 
@ … フォ ー ム デー タ の 送信 先 


合 … 入力 フィ ー ル ド の 形式 (Submit、image) 
賠 … 介 の 代わ り に 使用 する 送信 先 


form 要 素 の action 要 素 に は フォ ー 
ム デ ー タ の 送信 先 が 設定 され ます が 、 
formaction 属 性 は 、 こ れ を 上 書き する 送 
信 先 を 表し ます 。 

formaction 属 性 と 同じ よう に 、form 
要素 の 様々 な 属性 値 を 上 書き する 属性 に は 
以下 の も の が あり ます 。 


: formenctype 属 性 …form 要 素 の 
enctype 属 性 値 を 上 書き 

: formmethod 属 性 …form 要 素 の 
method 属 性 値 を 上 書き 


サン ブル ソー ス 開 議員 菩 


<!DOCTYPE html> 

<htmt tang="]a"> 

<head> 

<meta charset=Wutf-8 リ > 

<t1tte> フ ォ ー ム デー タ の 送信 先 が 異 な る ボタ ン 

を 作る </titte> 

/head> 

| <body> 共 正当 

| <form act1on="/"> 

<p><tabet> 南 北 戦争 を 説明 し な さい <br> 

<input type="text" name="anSswer"></ | 

Labet></p> 

<p><input type="submit リ vaLue=『" 送 信 『> 

<input て ype="'submit" formaction=' 監 正当 

"formnovaLidate vatue=! 保 存 "> く /p> 

く / form> 

</body> | 
</htmt> 

〔 


- formnovalidate 属 性 …form 要 素 の 
novalidate 属性 値 を 上 書き 
: formtarget 属 性 …form 要 素 の target 
属性 値 を 上 書き 
これ ら の 属性 を 利用 すれ ば 、 通 常 の 送信 
ボタ ン と は 動作 の 異な る ボタ ン を 作る こと 
が で きま す 。 
この 属性 は 、input 要 素 の type 属 性 が 
submit、image の と き と 、button 要 素 
こ 利 用 で きま す 。 


昌夫 線 案 除 


| > ブーム の 基本 的 設定 を する (P.126) 


elwlelo 和 8 
入力 フォ ー ム を 自由 に 配置 する 


」。 <form 1d=" 坦 "></form> 
=。| <1nput type=" 会 " name=" 略 " vatue=" 大 "form=" 念 > 


但 … Web ペ ー ジ 内 で の ユニ ー ク な 値 

合 … 入力 フィ ー ル ド の 形式 

圏 … 入力 フィ ー ル ド の 名 前 (質問 項目 ) 

支 | 入力 欄 に デフ ォ ル ト で 表示 する 編集 
可能 な テキ スト 

今 form 要 素 の id 属性 値 


H 
T 
M 
L 
リ 
フ 
た 
レ 
ン 
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入力 フォ ー ム を 自由 に 配置 する に は 、 ます 。 
form 属 人 を 使用 し ます 。 例え ば 、 記事 の 投稿 フォ ー ム に 画像 ファ 
form 属 性 は 関連 の ある form 要 素 を 表 イル を サー バ に アッ プロ ー ド する ボタ ン 
し ます 。 form 属 性 値 は 、 関連 の ある form と 、 記 事 の 内 容 を サー バ に 送信 する ボタ 
要素 の id 属性 値 を 示し ます 。 ン が あり 、 そ れ ぞ れ の デー タ の 送信 先 が 
input 要 素 な どの 入力 フォ ー ム 用 の 要素 別々 で ある と き な ど に form 属 性 は 利用 で 
は 、 通 常 は form 要素 の 中 に 入っ て いる 必 きま す 。 
要 が あり ます 。 この 属性 は 、button 要 素 、fieldset 要 
し か し form 属 性 を 利用 すれ ば 、 入 力 素 、input 要 素 、 keygen 要 素 、 |abel 要 素 、 
フォ ー ム 用 の 要素 は form 要 素 の 中 に 入っ Object 要素 、output 要 素 、select 要 素 、 
て いる 必要 は な く な り 、 ペ ー ジ 内 の 様々 な textarea 要 素 に 利用 で きま す 。 
場所 に 配置 する こと が で きる よう に な り 


MP ガッ ms ] ブラ ウザ 表示 
く !DOCTYPE htmt> 
<htmt tang="]a"> 
<head> 
<meta charset= リ Wutf-8"> 
<titLe> 入 力 フォ ー ム を 自由 に 配置 する </tit1e>| 
</head> 
<body> 世 剖 当 
| <p> 清 仏 戦争 の 絵日記 送信 フォ ー ム </p> 
| <p><Labet> 絵 日 記 の 画像 <br> | 
| く 1nput type="f1te" name="en1kk1" 


| form="form1"></tabet></p> 清 仏 戦 争 の 絵日記 送信 フォ ー ム 
| <form actton="/" 1d="form1"><1nput 
type="submit! vatue=『" 絵 日 記 を 送信 する 絵日記 の 画像 
> く /form> | | ファ イル を 選択 | 選択 され て いま せん 
</body> | | ーー 
</htmt> 誠信 する ] 
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@@@@0 呈 @ 
入力 例 を 表示 する 


構 細 type=" 氏 " name= リ 会 LN 


sa 。 pLacehotder="" 衣 > 
人 @ … 入力 フィ ー ル ド の 形式 


信 … 入力 フィ ー ル ド の 名 前 (質問 項目 ) 
圏 … 入力 欄 に デフ ォ ル ト で 表示 する 編集 


可能 な テキ スト 
文 … 入力 例 を 示す テキ スト 


placeholder 属 性 は 、 空 欄 の テキ スト 
ボッ クス に テキ スト を 入力 する 際 の 、 補 助 
と な る 入力 例 や 入力 形式 の 説明 な ど 、 短い 
テキ スト を 示し ます 。 

label 要 素 に 入る よう な 項目 名 や 、 
説明 文 な ど に は 適し て いま せん 。 

この 属性 は 、input 要 素 の type 属 性 が 
text、search、url、tel、emall、Dass 
word、number の と き と 、textarea 要 
素 に 利用 で きま す 。 

サン プル で は 、placeholder 属 性 を 指 
定 し た Input 要素 を 配置 し て いま す 。 その 


長い 


1 


た め 、 ブ ラウ ザ で 表示 し た と き に 、 テ キ 
ト ボ ックス に 「 例 : 1894 年 に 朝鮮 で 起き 
た 農民 の 内 乱 ] と いう テキ スト が 入力 例 と 
し て 表示 され る こと が わか り ま す 。 


くき パリ 74 


く !DOCTYPE htmL> 
<htmL tang="]a リ > 
く head> 1 
<meta charset=!"utf-8"> の き いつ 
<ttte> 入 力 例 を 表示 する </titte> 
| 
く </head> 
<body> 攻 四 
<form act1on="/"> 
<p><Labet> 東 学 党 の 乱 を 説明 し な さい <br> ト こ 4 
< く 1nput tyDe=" モ て text て" name="answer" * 佐 蔵 裕 
ptacehotder=\ 例 : 1894 年 に 朝鮮 で 起き た 農民 
の 内 乱 " ゆ </tabet></p> 
く p> く 1nput type="!subm1t"> く /p> | ーー 
</form> 
、 </body> | 還 
| | 
相 1 
: 関連 アニ メー ショ ン の 多 前 (P201)、1 回 の アニ メー ショ ン の 時 間 (P.202)、 ア ニメーション の 間 具合 (5203)、 


ニメーション の 開始 タイ ミン グ (P.204)、 


アニ メー ショ ン の 繰り 返し 回 数 (P.205) 


8 @ :) O 


H 
数 値 の 入力 を 制限 する M 
L 
1 
<1nput type=" 電 "name=" 全 り vatue=" 閣 " min=" 宮 | ラ 
文 max=" 今 " step="O"> 1 レ 
人 … 入力 フィ ー ル ド の 形式 ス 
全 … 入力 フィ ー ル ド の 名 前 (質問 項目 ) 
 … 入 力 欄 に デフ ォ ル ト で 表示 する | 
編集 可能 な テキ スト | 
雄 … 最も 低い 値 
今 … 最も 高い 値 | 
〇 … 値 の 精度 
min 属 性 と max 属 性 は 、 入 力 す る 値 の time、datetime-local、number、 


範囲 を 示し ます 。 range の と き に 利用 で きま す 。 
min 属 性 は 最も 低い 値 、max 属 性 は 最 

も 高い 値 を 示し ます 。 
step 属 性 は 、 値 の 精度 を 示し ます 。 例 

えば 0、10、15 と いう 値 を 許容 する な ら 、 

step 属 性 値 は 5 に な り ま す 。 値 の 精度 を 

決め な い ) 場 合 は any を 指定 し ます 。 
これ ら の 属性 は 、input 要 素 の type 属 

性 が datetime、date、 month、 week、 


py | 

DO2 上 よそ | 

<!DOCTYPE html> | 
、<htmt tang='ja"> ポー ツマ ス 条 約 が 署名 され た 年 を 答え な さい | 


く <head> 1904 4 六 年 


<meta charset="utf-8> 
<titte> 数 値 の 入力 を 制限 する </titte> [ 選 呈 ] LM に に | 
sm) に 画 琴 | 
く /head> 
| <body> 葉 吉 肖 1 2 
」 く form action="/ リ "> 
| <p> く Labet> ボ ポー ツマ ス 条 約 が 填 名 され た 年 を 答え な さい <br> 

<jnput type="'number" name="answer'' vatue="1999" min="1990" step="5"> 年 </tabet></p> 
く p> く 1nput type="'subm1t"> く /p> 

く /form> 

</body> 

く /htmt> 


に に 


@@@ O 


H 
征 
% テキ スト の 入力 を 制限 する 
リ 
/ | <jnput type=" 価 " name=" 全 "vatue=" 較 " pattern=『" 衣 " 
レ 文 titte=" 久 "> 
ス ⑯ … 入力 フィ ー ル ド の 形式 バ 
人 … 入力 フィ ー ル ド の 名 前 (質問 項目 ) Mud 上 
| 画 … 入力 欄 に デフ ォ ル ト で 表示 する 了 SD 局 
| 編集 可能 な テキ スト 


 … 正規 表現 の テキ スト 
< - 和 ん 形式 を 伝え る テキ スト 


pattern 属 性 は 、 入力 内 容 に 」avaScript 、… な ん で も 1 文字 


90 入所 が 生 用 人 の の Wu ま ます TEMLBOA ON AAAAS5) 

F 規 表 坦 こ は 、 字 の 集まり を ひと つの ム 。…0 文 字 以 上 の A (A、AA、AAA な ど 

文字 で 表現 する 方 法 で す 。 下 記 は 正規 表現 に 加え て A が な く て も OK) 

の 例 で す 。 At2}…2 個 の A (AA) 

^A…A で 始ま る テキ スト ie En 
(Abc、Ade、 Af など) aaa Ei wi 

AS…A で 総 わる テキ スト ext、 5eanch、 url、 人 、email、 
(aA、bA、 ccA な ど ) Password の と き に 利用 で きま す 。 

pattern 属 性 と 同時 に 指定 する title 属 


[ABCXYZ]… 

AB XY、Z の いれ か 1 計 。 必 よ 入 力 有 を 伝 える テキ スト で 、 不吉 
[A-Z]… ア ルフ ァ ベ ッ ト の 正 な テキ スト が 入力 され た と き の エ ラー 
_ いずれ か 1 文字 メッ セー ジ に 表示 され ます 。 


De 

<!DOCTYPE htmt> プラ ウザ 表示 
<htmt tang="a"> は | 
<head> 陸 了 | さら 宙 号 事件 | 
. <meta charset=!"!utf-8"> | 
| <titte> テ キス ト の 入力 を 制限 する </titLe> 
| 葉 党 滑 </head> 
| <body> 攻 正当 
<form ac て ton="/!> 
<p><Labet> さ ら え 祖母 プロ ジェ クト コー ド <br> 
く 1nput type="text!! name="code!" pattern= リ ! 
[9-9][A-Z]{31" titte= ユ つの 数 字 の あと に 3 つの 
英 大 文字 "></Labet></p> 
| <p><1nput type="'subm1t"> く /p> 
| く /form> | で むと つの 数 字 の あと に た 3 つの 英 大 文字 
| < く /body> 
</htmt> 


凡 指定 され て いる 形式 で 入力 し て くだ 
きい 。 
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あら @w@0W ぁ 


H 
ペー ジ を 開い て すぐ に 入力 で きる よう に する 
本 | ラ 
。 <1nput type=" 但 ! name=" 合 " vatue=! 還 " autofocus> | レ 

@ 入力 フィ ー ル ド の 形式 。 ス 
人 る … 入力 フィ ー ル ド の 名 前 (質問 項目 ) 
詳 入力 欄 に デフ ォ ル ト で 表示 する 
編集 可能 な テキ スト | 
| 拓 


autofocus 属 性 は 、 ペ ー ジ が 開い た ら 
すぐ に 入力 で きる よう 、 フ ォ ー カ ス を あて 
る こと を 示し ます 。 

この 属性 は 、button 要素 、input 要 素 、 
keygen 要 素 、select 要 素 、textarea 要 
素 に 利用 で きま す 。 

サン プル で は 、autofocus 属 性 を 指定 
し た Input 要素 を 配置 し て いま す 。 その た 
め 、 ブ ラウ ザ で 表示 し た と き に 、 テ キス ト 
ボッ クス に すぐ に 入力 で きる 状態 で ある こ 
と が わか り ま す 。 


< く !DOCTYPE htmL> 
| <htmt tang="a"> ] 
、 <head> 

| <meta charset="utf-8!> | 
| <titte> ペ ー ジ を 開い て すぐ に 入力 で きる よう に 
する </tjtte> 

</head> 

く body> 

| <form action="/ リ > 

| <p><tabet> 世 界 経済 恐慌 を 説明 し な さい <br> 
| く 1nput type="text" name=Wanswer" | 世界 経済 麗 慌 を 説明 し な さい 


autofocus> く /Labet> く </p> | 


] 
| < く p> く 1nput て ype="subm1t"></p> | | eg | 
</form> | | 
</body> | [ 送信 | 
</htmt> | 


に に 
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@@@ OO 


テキ スト ボッ クス で 入力 候補 を 表示 する 


| <input type="text" name=" 人 "List=" 全 "> 


4 <datat1st 1d=" 較 "> 


<option vatue=" 友 "> 金 </opt1on> 


く /datat1S て > 


圏 datalist 要 素 の id 属性 値 


フロ ー ・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 


価 入力 フィ ー ル ド の 名 前 (質問 項目 ) 
全 … 関連 付け る datalist 要 素 の id 属性 値 


太 … サー バー に 送信 する 値 / 金 … 


選択 項目 に 表示 する 値 


ke を ぶ の 栓 フレ ー ジ ング ・ コ ン テ ン ツ も し く は |0 個 以 上 
の option 要素 拓 


6 テキ スト ボッ クス の た 
(の 選択 項目 を 定義 し ます 。 datalist 要 素 
人 よく 入力 され る 内 容 を option 
要素 に よる 選択 式 に する こと が で きる た 
め 、 キ ー ボ ー ド で 値 を 打ち 込む お より も ス 
ムー ズ な 入力 を 組み 込め ます 。 
datalist 要 素 と Input 要素 の 関連 付け 
ょ よ 、datalist 要 素 の id 属性 値 を input 要 
素 の list 属 性 値 に 指定 する こと で 可能 に な 


サン ヴ ル ソー ス 


」 <!DOCTYPE htmt> 

<htmt tang='"a"><head> 計 清く /head> 

<body> 息 計 form action="/ リ > 

<p><Labet> 独 ソ 不可 侵 条 約 に つい て 説明 

し な さい <br> 

<input type="text" name=answer 
tist="'answer_ List"></tabet></p> 

<datatist 1d=Wanswer_L1st リ "> 

テキ スト ボッ クス に 記入 する か 下記 か ら 

1 つ 選 びさ い <br> 

< く setect name="answer_faLtback"> 

< く opt1ion vatue=WW!></opt1on> 

<option> 毒 素 蒸 か し 賃 に つい て 締結 され た 

条約 </option> 

<option> ド イツ と ソ連 の 間 に 締 結 さ れ た 不 

可 侵 条 約 </opton></setect></datat1st> 

| <p> く 1nput type="Subm1t リ "> く /p> 


< く /form></body></htmt> 


り ま す 。 

datalist 要 素 が サポ ー ト され て いな い ブ 
ラウ ザ で は 、datalist 要 素 の 内 容 が その ま 
ま 表 示さ れ ま す 。 そ の た め datalist 要 素 
内 に は 、 テ キス ト ボ ックス へ の 入力 また は 
ドロ ッ プ ダウ ン リ スト か ら の 選択 を 促す 言 
葉 と 、select 要 素 、option 要 素 を 記述 し 
て お く こ と が 適切 で し ょ う 。 


プラ ウザ 表示 


、 寺 表 か 供 人 5 


独 ソ 不可 侵 条 約 に つい て 説明 し な さい 
ーーー 当 
素 生 か し し 貨 に つい て 総 結 され た 条約 
eu ツ と ン 連 の 間 に 締結 れ た 不 末 侵 条 約 1 
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ある 範囲 内 で の 測定 値 を 表示 する 


<meter vatlue=" 電 " min="A" max=" 園 " tow="" 
= high=" 金 " optimum="O"></meter> 


倫 … デフ ォ ル ト で 表示 する 値 
今 … 最も 低い 値 

圏 … 最 も 高い 値 

直 … 低い 範囲 と の 境目 の 値 
全高 い 範 囲 と の 境目 の 値 
③ … 適正 値 


フロ ー・ コ ン テ ン ツ 、 フレ ー ジ ング コンテンツ 凡 計 2 肖 フレ ー ジ ング ・ コン テン ツ (meter 要素 は 不可 ) 


meter 要素 は 、 あ る 範囲 内 で の 測定 値 
を ゲー ジ の 形 で 表示 し ます 。 例 えば 、 デ ィ 
の 使用 量 、 Nori 古 4 ド 
の 関連 度 、 選 挙 で 特定 修 補 に 投票 し た 人 の 
割合 な ど 、 様々 な デー タ を 示 ミィ こ 使え ます 。 
min 属 性 は 最も 低い 値 を 、max 属 性 は 
最も 高い \ 値 を 設定 し ます 。 


に 分 ける こと が で きま す 。 
low 属 性 は 低い 範囲 と 中 くら い の 範 
の 境界 の 値 を 、high 属 性 は 中 くら い の 範 
、 高 い 範 囲 の 境界 の 値 を 設定 し ます 。 
optimum 属 性 は 、 適 正 値 を 示し ます 。 
meter 要素 が サポ ー ト され て いな いづ ブ 
ラウ ザ で は 、meter 要 素 の 内 容 が その ま 


value 属 性 は 、 ゲ ー ジ に 表示 する 測定 値 
と し て 設定 し ます 。 この 属性 は 必須 で す 。 
ゲー ジ は low 属 性 と high 属 性 を 使っ て 、 
値 が 低い 範囲 中 くら い の 範 囲 、 高 し 範囲 


飛 ツ プル ツー ス 
<!DOCTYPE htmt> 
<htmt tang="]a リ > 
く <head> 
<meta charset=Wutf-8!> 
<titLe> あ る 範囲 内 で の 測定 値 を 表示 する </ 
ttLe> 
</head> 
<body> 天 当 
<p> ヤ ル タ 会 議 の 出席 者 の や る 気 を 109 を 上 限 に 
し て 示し な さい <br> 
<meter vatue=!'89" mtn= り の" max= リ 199"> 
80% く /meter> く </p> 
</body> 
< く /htmt> 


ま 表示 され ます 。 そ の た め 、meter 要 素 
内 に は ゲー ジ の 状態 を 説明 する テキ スト を 
記述 し て お く の が 適切 で し ょ う 。 


プラ ウザ 表示 


ヤル タ 会 談 の 出席 者 の や る 気 を 100 を 上 限 に し て 示 | 
し な さい | 
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9eweo_ 
進捗 状況 を 表示 する 


構 

、。 <progress vatue=" 夫 "max=" 全 !> 
@ … 完了 し た 作業 の 量 
全 … 作業 の 全体 量 


フロ ー ・ コ ン テ ン ツ 、 フ レー ジン グ ・ コ ン テ ン ツ 
間 


HTML5 新規 


内 包 で きる も の 0 ジジ ン 人 = レタ ョ ピル ルル 
(progress 要素 は 不可 ) 和 


Drogress 要 素 は 、 作 業 の 進捗 状況 を ゲー 
ジ の 形 で 表示 し ます 。 
ここ で 言う 作業 と は 、 例 えば ブラ ウザ に 


maxX 属 性 は 、 作 業 の 全体 量 を 設定 し ま 
す 。 
progress 要 素 が サポ ー ト され て いな い 


ファ イル サイ ズ の 重い 画像 ファ イル 、 動 画 
ファ イル を 読み 込み こむ 処理 や 、 デ ー タ 
ベー ス か ら 大 量 の デー タ を 取得 する よう な 


ブラ ウザ で は 、progress 要 素 の 内 容 が そ 
の まま 表示 され ます 。 その た め progress 
要素 内 に は 、 ゲ ー ジ の 状態 を 説明 する テキ 


処理 を 指し ます 。 重 い デ ー タ の 処理 を 待つ 
間 、 ユー ザー に progress 要 素 を 利用 し て 
進捗 状況 を 示す こと で 、 作 業 が 進ん で いる 
こと を 知ら せる こと が で きま す 。 

value 属 性 は 、 す で に 完了 し た 作業 の 時 
設定 し ます 。 


| <!DOCTYPE htmt> 

<htmt tang="]a"> 

<head> 

| <meta charset=Wutf-8 リ > 

」 <titLe> 進 捗 状況 を 表示 する </t1tLe> 
| 

</head> 

<body> 

| 


<p>cuba.mpg コピ ー 進 捗 <br> 


| </body> 
| </htmt> 


| サン フル ソー ス 壮 軸 識 請 詳 請 誠 


| <progresS value="10! max="100">109% く </progreSS> く /D> 


スト を 記述 し て お く の が 適切 で し ょ う 。 


ブラ ウザ 表示 


| キュ ー い 人 き 来 


| cuba.mpg コピ ー 進 捗 
| | 能 崩 弱 双 人 則 


し =%t{q ヨ ヤ フ ん | 
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Chapter 3 


スタ イル シー ト の 誠 本 


スタ イル シー ト と は 11 

スタ イル シー ト の 設定 パタ ー ン 12) 
適用 メデ ィ ア の 設定 バタ ー ン (メデ ィ ア クエ リー) ) 
スタ イル シー ト の 人 ュ 用 対象 (セレ クタ ) 14】 6 


Web ペ ー ジ の 表示 内 容 は 、HTML を 使っ て 記述 され ます 。 HTML に よっ て 、 見 出し (h1 
ーh6 要 素 )、 段 落 (D 要 素 )、 画 像 (img 要 素 ) な ど が 表示 され ます 。 

た だ 、HTML が 進化 する 過程 で 、 文 書 の 構造 だ ば け で な く 、「 書 式 ] も タグ で 扱う こと が 
多く な り ま し た 。 例え ば 、 文 字 の 色 や 書体 を 指定 する た め の font 要 素 な ど が 作ら れ ま し た 。 
し か し 、HTML ファ イル の 中 に 構造 と 書式 が 混在 し て いる と 、 以 下 の よ うな デメ リッ ト 
が あり ます 。 


: HTML ファ イル の 見 通し が 悪く な る 

・ 同 じ 書 式 を 複数 の 箇所 で 指定 し よう と する と 、 同 じ タ グ を 何 度 も 書か な けれ ば な ら な い 
: 書式 を 変え よう と する と 、HTML フ ァイル 内 の あちこち の タグ の 修正 が 必要 に な る 

: HTML フ ァイル 間 で デザ イン を 統一 する の が 難し い 


そこ で 、HTML に は 文書 の 構 


央 MM | スタ イル シー ト 
造 と 内 容 の み を 入れ る よう に し 、 | 


HTML 文 書 


文書 の 書式 に 関す る 部 分 を 「 ス 文書 の 構造 | 電 境 | 文書 の 書式 


(見 出し 、 本 文 …) (フォ > 條 、 文字 サイ ズ …) 


| 


タイ ル シ ー ト 」 と し て 独立 させ | 
1.@ HTML 文書 と スタ イル シー ト の 関係 


て 、 両 者 を 連携 させ る 方 法 が 取 
られ る よう に な り ま し た 。 CSS 
は [Cascading Style Sheet」 (重ね 合わ せる 書式 の 文書 ) の 賠 で す 。 


cgFfr テ ー マ ご さぶ 


邊 HTML の 要素 に つい て | ーーーー 


HTML 文書 は 様々 な 要素 か ら 構 成 され ます が 、 | 1 [アラ イン 
CSS の 新しい レベ ル (CSS3) で は 、 要 素 を 「 ブ ロッ | | 
クコ ン テ ナ 」 と [イン ライ ン 要 素 」 に 大 別 し ます 。 | on | 
ブロ ッ ク コ ン テ ナ は 、HTAL 文書 の 骨格 と な | イン ライ ン 要 素 | | イン ライ ン 要 素 


る 要素 と 言え ます 。 プ ロッ クコ ン テ ナ に は 、 見 出 
し (h1 一 h6 要素)、 段 落 (D 要 素 ) な ど が あり | 
ます 。 ブ ロッ クコ ン テ ナ は 、Web ブ ラウ ザ 上 で 
は 長方形 の 鶴 城 こと し て 表示 され ます 。 

ブロッ クコ ン テ ナ の 中 に は 、 別 の プ ブロック コン 
テ ナ を 入れ る こと が で きま す (た だ し 、 入 れ ら れ な い 場 合 も め り ま す )。 また 、 ブ ロッ ク 
コン テ ナ に は イン ライ ン 要 素 を 入れ る こと も で きま す 。 


W ブロ ッ ク コ ン テ 
BBH 


2 ブロ ッ ク コ ン テ ナ と イン ライ ン 要 素 


イン ライ ン 要 素 
イン ライ ン 要 素 は 、 ブ ロ 


ン テ ナ の 中 身 と な る よう な も の で 、 文章 の 一 部 に 特別 な 


意味 を 持た せ た り 、 特殊 な 動作 を させ た りす る と き に 使い ます 。 例え ば 、 リン ク (a 要 素 ) 
や 強調 (em 要素 ) な ど が イン ライ ン 要 素 で す 。 

イン ライ ン 要 素 は 特定 の 形 を 持ち ませ ん 。 WeDb ペ ー ジ の レイ アウ ト に よっ て 、 ひ と つ 
の 行 の 中 だ だ け で 表示 され る こと も あれ は ば 、 複 数 行 に また が っ て 表示 され る こと も あり ます 。 


非 置換 イン ライ ン 要 素 と 置換 イン ライ ン 要 素 
イン ライ ン 要 素 は 、 さ ら に 非 置換 イン ライ ン 要 素 と 置換 イン ライ ン 要 素 に 分 類 さ れ ま す 。 


* 非 置換 イン ライ ン 要 素 … 開 始 タ グ と 終了 タグ の 間 の 文字 列 が ブラ ウザ に 表示 され ます 。 
大 半 の イン ライ ン 要 素 が 非 置換 イン ライ ン 要 素 で す 。 

* 置換 イン ライ ン 要 素 … 文 字 列 が 何 か 他 の も の に 置換 され て 表示 され ます 。 画像 (img 
要素 ) や フォ ー ム の 入力 部 品 (input 要 素 ) な ど が 置換 イン ライ ン 要 素 で す 。 


邊 要素 どう し の 関係 作 
5 ひと つ 目 <em> の p 要 素 
ここ まで で 述べ た よう に 、 要素 らぶ た っ 目 の p 要 素 p: 。 

の 中 に 別 の 要素 が 入る こと も あり  「<tsbtes 


ます 。 例 えば 、 右 記 HTML で は 、 P ーー 

要素 は 図 3 の よう な 階層 関係 に な っ |</tsbues 

て いま す 。 に body 
要素 間 の 関係 は 、 規 」 や 「 子 」 | pages ] 

な どの 言葉 で 表し ます 。 | 

- 親 要 素 (gi! っ 2p (2 っ Oh (5)table 


ある 要素 か ら 見 て 、 ひと つよ の | | 
脂 慎 に ある 要素 の こと を 、| 親 要素 」 | gm 本 


と 呼び ます 。 例 えば 、 図 の (3) の | 


em 要素 の 場合 、 親 要素 は (2) の p 
要素 で す 。 


(の 1 の td 来 (8)2 っ 目 の to 
図 3 @ 要 素 問 の 階層 関係 


* 子 要素 

ある 要素 か ら 見 て 、 ひ と つ 下 の 階層 に ある 要素 の こと を 、[ 子 要素 ] と 呼び ます 。 例え ば 、 
記 の (2) の Dp 要 素 の 場合 、 子 要素 は (3) の em 要素 で す 。 また 、(6) の tr 要素 に は 、(7) と (8) 
の ぶた つの 子 要素 が あり ます 。 


* 子 孫 要素 
ある 要素 がら 下 の 階 層 に ある すべ て の 要素 の こと を 、「 子 孫 要素 ] と 呼び ます 。 例え ば 、 
層 の (1) の body 要素 か ら 見 る と 、(2) 一 (8) は すべ て 子孫 要素 で す 。 


ーー スト 
に 


ズ 
4 
の 。 
ル 
MM 
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ト 
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は 
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| 


スタ イル シー ト の 基本 的 な 書き 方 


軒 セ レク タン プロ パテ ィ ノ 値 


CSS で は 、 以 下 の よ うな 書き 方 で 、 ス タイ ル を 指定 する 対象 と 、 設定 する 項目 / 値 を 


記述 し ます 。 


セレ クタ { プロ パテ ィ : 値 ,: プロ パテ ィ : 値 : …} 


・ セレ クタ 


セレ クタ と は 、 書 式 を 設定 する 対象 の こと を 指し ます 。 セレ クタ の 部 分 に は 、HTMIL 
の 要素 の タグ 名 を 指定 する こと が で きま す 。 

また 、「ID] や 「 ク ラス 」 と いっ た も の を 指定 する こと も で きま す 。 さら に 、 こ れ ら を 
組み 合わ せ て 、 対 象 を 細か く 絞 り 込 むこ と も で きま す ( 表 1 を 参照 )。 


:・ プロ パテ ィ 


プロ パテ ィ と は 、 設 定 し た い 書 式 の 種類 を 表し ます 。「 文 字 の 大 き さ 」「 文 字 の 色 」「 幅 ] な ど 、 
書式 に は 様々 な も の が あり 、 それ ぞ れ に 対応 する プロ パテ ィ が あり ます 。 


個々 の プロ パテ ィ に 対し て 、 設 定 する 値 を 指定 し ます 。 例え ば 、「 文 字 の 大 き さ を 12 
ポイ ント に する 」 と いう 場合 だ と 、 


「12 ポ イン ト ]」 を 値 で 指定 し ます 。 


ひと つの セレ クタ に 対し て 、 複 数 の プロ パテ ィ を 設定 する こと も で きま す 。 そ の 場合 は 、 
「 プ ロ パ ティ : 値 3』] の 部 分 を 列挙 し ます 。 


セレ クタ の パタ ー ン (e、f に は 任意 の 要素 、att は 属性 、val は 値 、s は セレ クタ が 入る ) 
CSS2 まで の セレ クタ の パタ ー ン ( 表 1) 


タツ 種類 説明 

* 全 称 セレ クタ すべ て の 要素 

e タイ プ セ レク タ  e 要素 

ef 子孫 セレ クタ  e 要 素 の 子孫 要素 で ある f 要素 

e>f 子供 セレ クタ  e 要素 の 子 要素 で ある f 要素 

e+f 隣接 セレ クタ  e 要素 の 直後 に 続い て いる f 要素 

e[att] 属性 セレ クタ att 属性 ( 値 は 問わ な い ) を 持つ e 要素 

e[att="vaU"] 属性 セレ クタ att 属性 の 属性 値 が 「vaLl で ある e 要素 

e[att<="vaL"] 属性 セレ クタ att 属性 の 属性 値 が スペ ー ス 区 切り の リス ト で 、 そ の ひと つ に 
「Vaul と いう 値 を と る e 要素 

e[att|="vat"] 属性 セレ クタ att 属性 の 属性 値 が ハイ フン 区 切り の 値 の リス ト で 、 そ の リス ト が 
[vatl で 始ま る 値 を と る e 要素 

e.cla クラ ス セ レク タ cta と いう 名 前 の クラ ス 名 (ctass="cta") を 持つ 、e 要素 

e#my1d TD セレ クタ myid と いう 名 前 の クラ ス 名 (1d="my1d") を 持つ 、e 要素 

e:first-chitd 擬似 クラ ス 親 要素 内 で 最初 の 子 要素 で ある e 要素 


e:tnk/e:v1s1ted 擬似 クラ ス 


リン ク 先 が 未 訪 の e 要素 / 訪問 済 の e 要素 


e:hover/e:act1ve 擬似 クラ ス 


マウ ス オ ー バ ー の 状態 に ある / マウ ス で 押さ れ て いる e 要素 


パタ ー ン 種類 説明 
e:focus 擬似 クラ ス フォ ー カ ス さ れ で て いる e 要素 
e:Lang(co) 擬似 クラ ス co と いう 言語 で 記述 され た e 要素 
e:first-Line 擬似 要素 e 要素 (ブロ ッ ク 要 素 ) の 最初 の + 行 目 
e:first-Letter 擬似 要素 e 要素 (ブロ ッ ク 要 素 ) の 最初 の 1 文字 目 
e:before 擬似 要素 e 要素 の 前 
eafter 擬似 要素 e 要素 の 後 
CSS3 で 追加 され た セレ クタ の パタ ー ン ( 表 2) 
バタ ー ン 種類 説明 
e[att^="vat"] 属性 セレ クタ att 属性 の 属性 値 が 「vat」 か ら 始 まる e 要素 
e[att$="vat"] 属性 セレ クタ att 属性 の 属性 値 が 「vaul で 終わ る e 要素 
e[att*="vaL"] 属性 セレ クタ att 属性 の 属性 値 が 「vall」 を 含む e 要素 
e:target 擬似 クラ ス リン ク で 移動 し た 先 に ある e 要素 
e:enabted 擬似 クラ ス 有効 状態 に ある e 要素 
eidisabted 擬似 クラ ス 無効 状態 に ある e 要素 
e:checked 擬似 クラ ス チェ ッ ク 状 態 に ある e 要素 
eiroot 擬似 クラ ス ドキ ュ メ ント の ルー ト 要 素 で ある e 要素 
e: tast-chitd 擬似 クラ ス 親 要 素 内 で 最後 の 子 要素 で ある e 要素 
einth-chitd(n) 擬似 クラ ス 親 要素 内 で 最初 か ら n 番目 の 子 要素 で ある e 要素 
einth-tast-chitd(n) 擬似 クラ ス 親 要 素 内 で 最後 か ら n 番 目 の 子 要素 で ある e 要素 四 
eonLy-chitd 擬似 クラ ス 親 要素 内 で 唯一 の 子 要素 で ある e 要素 0 
e:first-of-type 擬似 クラ ス 兄弟 要素 で ある e 要素 の 中 で 最初 の e 要素 ル 
e: Last-of-type 擬似 クラ ス 兄弟 要素 で ある e 要素 の 中 で 最後 の e 要素 か 
ernth-of-type(n) 擬似 クラ ス 兄弟 要素 で ある e 要 素 の 中 で 最初 か ら n 番目 の e 要素 | 
e:nth-Last-of-type(n) 擬似 タラス 兄弟 要素 で ある e 要素 の 中 で 最後 か ら n 番目 の e 要素 則 
ei:onLy-of-type 擬似 クラ ス 親 要素 内 で 唯一 の e 要素 は 
e:empty 擬似 クラ ス 内 容 が 空 の e 要素 
e:not(s) 擬似 クラ ス s の セレ クタ に マッ チ し な い e 要素 
e-f 間接 セレ クタ  e 要素 以 降 の 同じ 階層 の f 要素 
四 ス タイ ル を 書く 場所 


スタ イル は 下記 の 3 つの 場所 に 書く こと が で きま す 。 


(1) link 要 素 で 読み 込む お こと が で きる 外部 ファ イル の css ファ イル 
(2) head 要 素 内 に 記述 する style 要 素 
(3) 要素 に 記述 する style 選 性 


(1)、(2) は セレ クタ か が ら の 指定 (セレ クタ { プロ パテ ィ : 値 , プロ パテ ィ : 値 : 
… +)、(3) は プロ パテ ィ と 値 の み を 指定 (プロ パテ ィ : 値 :) に な り ま す 。 


年 ス タイ ル を 適用 する 「 ボ ックス 」 の し くみ 

HTML 文書 で は 、 段 落 や 文字 は 四角 形 の 領域 に 配置 され る こと が 多い で す 。 それ ら の 
領域 の こと を 、「 ボ ックス 」 と 呼び ます 。 
ボッ クス は 、 図 4 の 4 つの 部 分 か ら 構成 され ます ( 図 2。 この し くみ の こと を 、[ ボ ッ 


ーー 
に デバ 


NX 


お 
3 


理 テー 


クス モデ ル 」 と 呼び ます 。 margin 系 プロ パテ ィ で 指定 | 


| border 系 プロ パテ ィ で 指定 | 

VN グ | 0 

パ デ ィ ン グ の サイ ズ 等 | | 

は 、 そ れ ぞ れ margin 系 PP も お | 

ONELKVaeldiig 1 height プ ロ パ ティ で 指定 | 
系 の プロ パテ ィ で 指定 し | 

ます 。 図 4 @ ボ ックス モデ ル 


また 、 要 素 の サイ ズ を 指定 する プロ パテ ィ (width 等 ) で は 、 原 則 と し て コン テン ツ 
部 分 の サイ ズ を 指定 し ます 。 例 えば 、「width: 399pxj] と 指定 する と 、 そ の 要素 の コ 
ン テ ン ツ 部 分 の 幅 が 300pxX に な り ま す 。 


自 値 の 型 と 書き 方 
プロ リティ に 指定 する 値 に は 、 い くつ か の 型 が め り 、 そ れ ぞ れ で 書き 方 が 決ま っ て いま す 。 


長 さ 

幅 や 高 さ を 指定 する 場合 、 数 値 に 「 絶 対 単位 ] (absolute units) か [相対 単 位 ] (relative 
units) を つけ ます 。 た だ し 、 長 さ が 0 の と き は 、 単位 を 省略 し て 単に 「0] と 書く こと 
が で きま す 。 

絶対 単位 は 、 セ ンチ メー トル 単位 な ど 、 他 の 単位 の 影響 を 受け な い 長 さ を 表す 際 こ 使い ます 。 

一 方 の 相対 単位 は 、「 フ ォ ン ト の サイ ズ 」| な ど 、 他 の 単位 に よっ て 変化 する 長 さ を 表す 
際 に 使い ます 。 


単位 意味 
jn イン チ 
cm セン チ メ ー ト ル 
0 mm ミリ メー トル 
絶対 単位 pt ポイ ント ( 1/72 イン チ ) 
Pc パイ カ ( 王 12 ポイ ント 1/6 イン チ ) 
PX ピク セル ( 三 9.75 ポイ ント 1/96 イン チ ) 
em 対象 要素 の フォ ント サイ ズ 
eX 対象 要素 の 「x」 の 文字 の 高 さ 
ch 対象 要素 の 「9] の 文字 の 横幅 
la rem ルー ト 要 素 の フォ ント サイ ズ 
相対 単位 ビ ピュー ポー ト の 幅 の 1% 
vh ビュ ー ポ ー ト の 高 さ の 1% 
vmin vw と vh の どちら か 小さ い 方 
Vmax vw と vh の どちら か 大 きい 方 


OiFRUEH 折ら 3 本 AA DP em ーー 
な お 、 相 対 単位 は CSS レベ ル 3 で 拡張 され て いま す 。 た だ し 、 vw プン vmin は 、 本 
書 執筆 時 点 で は Google ChromeSafari 6/Internet Explore 10 で サポ ー ト され 


て いま す 。 ま た 、vmax は 2012 年 8 月 に 新た に 追加 され た た め 、 本 書 執筆 時 点 で は 対応 
し て いる Web ブ ラウ ザ は まだ あり ませ ん で し た 。 


カラ ー の 値 

色 を 指定 する 場合 は 、(1)RGB の 数 値 、(2) カラ ー ネ ー ム 、(3)HSL の 数 値 の 3 通り の 方 
法 が あり ます 。 

RGB は Red、Green、Blue の 如 数 値 の 組み 合わ せ 、HSL は Hue (色相 )、Saturation (月 
度 )、Lightness (明度 ) の 各 数 値 の 組み 合わ せ で 指定 し ます 。 


(1) RGB の 数 値 に は 、 下 記 の よう な 表記 方 法 が あり ます 。 
値 の 表記 例 説明 
#ff9099 [#」 に 続け て RGB 各色 の 16 進数 値 を 指定 
#f99 ぞ ろ 目 の 16 進数 値 を 略記 し た 指定 。 左 の 例 は #ff9909 と 同じ 意味 
rgb() の 括弧 内 に 「,」 (コン マ ) 区 切り の RGB 各色 (9 255) を 指定 
rgb(255,9,9) rgb() の 括弧 内 に 「,」] (コン マ ) 区 切り の RGB 各色 (9% ー 199%) を 指定 
rgb() の 括弧 内 に 「,」] (コン マ ) 区 切り の RGB 各色 と 不透明 度 (9 ~ 1) を 指定 


(2) カラ ー ネ ー ム は 、 カ ラー ネー ム 一 覧 (P302) に 示す 値 が 指定 で きま す 。 
(③) HSL の 数 値 は 、 下 記 の 指定 方 法 が あり ます 。 


値 の 表記 説明 
(1) に 、H の 9 ~ 199 の 値 と S、 L の 9% … 199% の 値 を 「,」 (コン マ ) 区 切り で 指定 
hst((1)) (1) に 、H の 9@ 190 の 値 と S、 L の 9%… 1099% の 値 と 不透明 度 を 「,] (コン マ ) 区 切 
り で 指定 


な お 、HSL の 数 値 の 色 指 定 は IE9 以 上 と その 他 の ブラ ウザ で 利用 可能 で す 。 


パー セン ト 値 

色 、 帆 ・ 高 ぶ 、 フ ォ ン ト サ イ ズ 、 線 の 太 さ な どの 指定 に 使う 形式 で す 。 

値 は 、90% や 20.5% の よう に 、 整 数 や 小数 に % を つけ た 数 値 で す 。 

パー セン ト 値 は 、 例 えば 親 要 素 の フォ ント サイ ズ を 時 準 に し て 、 相 対 的 に サイ ズ を 指定 
する よう な 場合 に 使用 する 相対 値 で す 。 


せ 


数 値 
値 と し て 数 値 を 指定 する 場合 は 、 そ の 値 を その まま 書き ます 。 例え ば 、「z-index」 プ 
ロ パ ティ の 値 を 3 に する 場合 だ と 、 以 下 の よ うに 書き ます 。 


Z-1ndex: 3 


アド レス 
アド レス (URL) を 指定 する 場合 は 、 ア ドレ ス を 「url0」 で 囲み ます 。 アド レス の 前 後 を 「」 
や "| で 囲ん で も 構い ませ ん 。 
例え ば 、「background-imagel と いう プロ 


パテ ィ に 対し て 、「http://wwwfoo. 


に 
ーー 


こい | 


1 
ト 
と 


に 


com/barjpgl」 の 値 を 指定 する に は 、 以 下 の よ うな 書き 方 を し ます 。 


background-1mage: urt(http://www.foo.com/bar.]pg)} 

background-1mage: urt("http://www.foo.com/bar.]pg") ぅ 

た だ し 、 一 部 の プロ パテ ィ で は 「urt()」 を 使わ むず に 、 直 接 ア ドレ ス を 指定 する こと 1 
あり ます 。 


6 


文字 列 

値 と し て 文字 列 を 指定 する 場合 は 、 文 字 列 の 前 後 を シン グル クォーテーション マー ク (') 
また は ダブ ルク オォ ー テ ーション マー ク (⑨) で 囲み ます 。 

文字 列 の 中 に 「'」 や [mw を 含 お 場合 、「"'」 (また は 「) が 入れ 子 に な ら な いよ うに 
組み 合わ せる か 、 も し く は 「\'」 や 「\"m] の よう に エス ケー プ し ます 。 例え ば 、「content] 
と いう プロ パテ ィ に 、「This is "content'] と いう 文字 列 を 指定 し た い 場 合 だ と 、 以 下 の 
よう な 書き 方 を し ます 。 


content: !Thts 1s "content"! ぅ 
content: "Ths 1s \ り "content\W リ 5 


初期 値 
ほとん どの プロ パテ ィ に は 初期 値 が 設定 され て いま す 。 値 を 指定 し な い プ ロ パ ティ は 、 


初期 値 で 表示 され ます 。 


rr テー ご ユ さい 


血 CSS53 に つい て 
CSS3 で は 表現 力 を 向上 させ る 多く の プロ パテ ィ が 追加 され まし た 。 


> 色相 、 彩 度 、 輝 度 に よる 直感 的 な 色 指 定 (hsL()) 。 ・ ド ロッ プシ ャ ドウ (box-shadow) 
・ 半 透明 を 含む 色 指 定 (rgba()、 hsta()) * カラ ム (coLumn プロ パテ ィ ) 
・ Web フォ ント (@font-face ルー ル ) ・ 変 形 (transform プロ パテ ィ ) 


・ メ ディ アク エリ ー (@media screen and 
(min-width: 699px) 等 ) 


・ グラデーション (Uinear-gradient 等 ) ・ アニ メー ショ ン (animat1on プロ パテ ィ ) 


* 画像 ボー ダー (border-1mage) 


* トラ ンジ ショ ン (trans1t1on プロ パテ ィ ) 


現在 、 ス マー ト フ ォ ン や タブ レッ ト な どの イン ター ネッ ト に 接続 する 端末 が 普及 し て き 
まし た 。 これ か ら も ) 加 束 度 的 に その 数 は 多く な つて いき ます が 、 パ ソコ ン と 比べ る と 通信 
速度 や 処理 速度 が 遅く な る 傾向 が め り ま す 。 

これ ら の 端末 向け の Web コ ン テ ン ツ を 作る と き は 、 ダ ウン ロー ド す る 画像 を 少な し 、 
CSS で 表現 する 部 分 を 増やす よう に 考え まし ょ う 。 CSS を 使う と 、 通 信 旦 を 節約 で き 、 
表示 を 早く で きる メリ ッ ト が あり ます 。 


別 ファ イ ル の スタ イ ル を 読み 込む 


に < く nk ret="stytesheet" href=" 二 "type=" 全 り "> 


・ 外部 スタ イル シー ト の URL 
・ text/csS な どの MIME タ イプ 


癌 用 可能 な 要素 上 :MAxd の EE 


Web サ イト 全体 の デザ イン を 統一 する _ ト の ファ イル の URL を 指定 し ます 。 ま た 、 
に は 、 ス タイ ル シ ー ト と HTML ファ イル スタ イル シー ト の ファ イル に は 、「 セ レク 
を 別々 の ファ イル に し て お いて 、 個 々 の タタ { プロ パテ ィ : 値 : }」 の 部 分 を 列挙 
HTML フ ァイル に スタ イル シー ト の ファ し て お きま す 。 
イル を 組み 込む 、 と いう 方 法 を 取り ます 。 type 属 性 は 、 ス タイ ル シ ー ト の MIME 
この し くみ を 、 外 部 スタ イル シー ト と 呼び タイ プ を 示し ます 。 属 性 値 が text/css で 
ます 。 ある 場合 は 、type 属 性 は 不要 で す 。text/ 

それ に は 、 各 HTML フ ァイル の head css 以外 で ある 場合 は 、 適 切な MIME タ 
要素 内 に link 要 素 を 入れ て 、 スタ イル シ ー イブ を 指定 する 必要 が あり ます 。 


サザ シワ ヴ ル ソース 胎 ji 前 
<!DOCTYPE htmt> 

<htmt tang="]a"> 

<head> 

<meta charset=Wutf-8> 

<titte> 別 ファ イル に 記述 し て 宣言 ・ フ ァイル を 参照 し て 適用 </tTtUe> 

<Link ret=stytesheet" href= PP csSS" type="text て /css リ > 

</head> 

く <body> 


<p> 食 べ る 順番 が 大 事 と か … 糖 質 制 限 と か … 試 し て な い 

けど …</p> 
</body></htmt> ぐ 人 な が ら 

導 で 3 あ も に 引い 


| サン フル ソー ス MeEEICYSVENeERS) 

div { text-al1ign: centeri } 

P { font-s1ze: 14ptj background-cotorx 
#99ffff } 


着 上 3 テー ツユ 
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タ 
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MM 
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eleel eo る 8 
ヘッ ダ に スタ イル を 語 記述 する 


装 唱 ら テ ナー マ ご へ 


中 </StyLe> 


便 text/csSsS な どの MIME タ イプ 
人 … セレ クタ { プロ パテ ィ : 値 : } 


EZ だ: 種 すべ て の 要素 


ひと つの ペー ジ 内 の デザ イン を 統一 する イブ を 指定 する 必要 が あり ます 。 
に は 、 HTML ファ イル の 中 に スタ イル シー サン プル で は 、head 要 素 内 に style 要 
ト を 直接 組み 込む お 、 と いう 方 法 が あり ます 。 素 を 指定 し て いま す 。 その た め 、 ブ ラウ ザ 
それ に は 、 各 HTML ファ イル の head 要 で 表示 し た と き に 、 背 景色 が 黄色 の 段落 が 
素 内 に style 要 素 を 入れ て 「 セ レク タ { 表示 され る こと が わか り ま す 。 
プロ パテ ィ : 値 , }| の 部 分 を 列挙 し ます 。 
この よう な 書き 方 の こと を 、「 埋 め 込み ス 
タイ ル シ ー ト 」 と 呼び ます 。 
type 属 性 は 、 ス タイ ル シ ー ト の AMIME 
タイ プ を 示し ます 。 属 性 値 が text/css で 
ある 場合 は 、type 属 性 は 不要 で す 。 text/ 
css 以 外 で ある 場合 は 、 適 切な MIME タ 


スズ 
商 
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ババ 
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ブラ ウザ 表示 


<!DOCTYPE htmtl> 


<htmt tang="a"> 
<head> 

<meta charset="ut 和 プー8"> | で 
<titte> ヘ ッ ダ に 記述 し て 宣言 ・ 適 用 </titte> | rip 
く styLe> 

中 中 | | 
.・hc { font-s1ize: 14pxi baeketeund 
cotor: #ffff993 } 

</styte> 
</head> 
< く body> 


<p> い ろ ん な 方 法 を 一 通り 試し まし た </p> いる ん な 方 法 を 一 通り 試し まし た 
<p cLass="hc> 教 訓 は [続け る こと と 」 ね </p> 半 誠 は! 壮 9 る を s ね に ーー ーー ーー 


</body> | 
</htmt> 
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2eeweos@ 
要素 に スタ イル を 直接 記 達 する 


< 坦 styte="A"> 較 </ 多 > 

信 要 素 名 

全 … プロ パテ ィ : 値 : 

| 詳 … スタ イル を 適用 する テキ スト や 画像 な ど 


ジ 
着 唱 9 ケー ツマ だ へ ぬ 


だ: に 3 だま: 得 すべ て の 要素 


ある 要素 の み に 書 式 を 設定 する に は 、 そ ンス タイ ル シ ー ト の 指定 が 優先 され ます 。 
の 要素 の 開始 タグ の 中 に style 属 性 を 入れ 、 
設定 し た い 書 式 (プロ パテ ィ ) と 設定 する 
値 を 列挙 し ます 。 こ の よう な 書き 方 の こと 
を 、「 イ ン ラ イン スタ イル シー ト 」 と 呼び 
ます 。 


ー ユ 
ト ) 


ご さ ひ > 


ュ ン = ニ >7 を 上 で 


な お 、 埋 め 込 み ス タイ ル シ ー ト と 、 イ ン 昧 モ 交 め 3 
ライ ンス タイ ル シ ー ト と は 、 共 存 さ せる こ | RNN 
と が で きま す 。 そ の 際 、 埋 め 込み ゲイ ン ラ | の 


1 
ト 
の 
イン の 両方 の スタ イル シー ト で 、 ひと つの テ 


に 
ョ ー 


プロ パテ ィ に 対し て 別々 の 値 を 指定 する こ 
と が 起こ りえ ます 。 その と き は 、 イ ン ラ イ 


ラン ニン グ の 記録 


に 


| 2 日 目 : 際 痛 の た め 休 み 


く !DOCTYPE mt> 
| <htmU tang=" け a"> | 
<head> 

. <meta charset="utf-8"> 

| <ttte> 要 素 に styte 属 性 を 追加 し て 宣言 ・ 適 用 </t1tte> 
| </head> 


| <ht> ラ ン ニ ング の 記録 </h1> 

| <p styLe="font-size: 14pxj background-cotor: red: cotor: #Fff3">1 日 目 : 膝 を 痛め た </ 
P> 

| <p>2 日 目 : 膝 痛 の た め 休 み </p> 


| </body> 
| </htmt> 


ら スタ イル シー ト の 基本 的 な 書き 方 (P.162) 3 169 
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@'e e の lo| 朝 


ス 
7 要 索 に 定義 済み の スタ イル を 導 用 する 
1 琴 
9 < 介 class=" 人 "> 圏 </ 多 > 
本 信 … 要素 名 
全 … クラ ス 名 


圏 … スタ イル を 適用 する テキ スト や 画像 な ど 


EEZ を 王手 すべ て の 要素 


外部 スタ イル シー ト 内 の クラ ス や 、 ペ ー 
ジ 内 に 記述 し た クラ ス を ペー ジ 内 の 要素 に 
適用 する 場合 、 要 素 の class 属性 値 に クラ 
ス 名 を 記述 し ます 。 

サン プル で は 、style 要 素 で 指定 し た 
「lead] クラ ス を 、p 要 素 で class 属 性 で 
旧 定 し て いま す 。 その た め 、 ブ ラウ ザ で 表 
示し た と き に 、 フ ォ ン ト サ イ ズ が 14pt で 
背景 色 が 黄色 の 段落 が 表示 され る こと が わ 
か り ま す 。 


スズ 
タ 
2 
ル 
シ 
| 
トド 
の 
設 
に コ 
パ 
1 
by。 


| サン ブル ソー メ 」 間 議 フラ ウザ 表示 
< く !DOCTYPE htmt> 
<htmt tang='a"> 


く <head> 

<meta charset=Wutf-8 リ "> 

<tittey 要 素 に 定義 済み の スタ イル を 適用 </ | ar 
titte> | kk の いん 
<styLe> 


・Lead { font-size: 14pt:』 background- 
coLor: #fFfff99 } | 
</styte> 
</head> | 
<body> 滞 当 

<p clLass="tead"> ダ イエ ッ ト 成 功 ! </p> 
<p> で も 1 か 月 後に 元 どおり onz</p> 
</body> | で も 1 か 月 後に 元 ど お り onz 
く /htmLt> 
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8 る eleleo#@ 
対象 ユー ザー 環境 を CSS フ ァイル 内 に 指定 する 


夫 G@media 二 and ( 全 ){ 圏 } NSH 間 科 | | 

デイ アタ イジ MINMI 
メデ イア クタ エ リー 

上 vi セレ クタ (プロ パティ イ 仁 


装 肌 う ケ ー マ ど さ へ 


お E ま ま < 得 すべ て の 要素 


スタ イル の 適用 対象 に する ユー ザー 環 @media ル ー ル を 利用 する 場合 は 、 複 
境 を HTML フ ァイル に 記述 する 場合 は 、 数 の 環境 の スタ イル を 、CSS ファ イル に 


ジジ 


link 要素 の media 属 性 を 使用 し ます が 、 まとめ て 記述 する こと が で きま す 。 
ワラ ウザ 表示 


CSS フ ァイル に 記述 する 場合 は @media 
ルー ル を 使用 し ます 。 

メデ ィ ア タイ プ と メデ ィ ア クエ リー に 6 et 
つい て は 、「 閲 覧 環境 ご と に 読み 込む CSS 
ファ イル を 設定 ]」 (P104) を 参照 し て く 
だ さい 、。 

link 要素 の media 属 性 を 利用 する 場合 
よ 、 ひと つ ひ と つの 環境 の スタ イル を 別々 
の CSS ファ イル に 記述 する こと に な り ま す 。 


サン ソフ ブル ソース 
く !DOCTYPE html> 
<htmt tang="a"> 
<head> 攻 良 
<styte> は Way-mmecs- > 
#content { background-coLor: #ffffcci + で て) で | hemscts3.codgmedesigmJp/chapter137C13.01htm| 補記 
G@media screen and (min-width: 649px) { 

#content { marg1n-r1ght: 200pxi } 


メ 
プ ッ 
イ 
ア 
ク 
に に 
リ 
さ ぷ 


く /styte> 

</head> 

<body> 攻 正当 

<div 1d="container"> 
<div 1d="content"> コ ン テ ン ツ <br><jimg src="S1391.png"' att=!W> く </d1v> く /d1V> 

く /d1V> 

<div id="sidebar"> サ イ ド バ ー</div> 

</body> 

</htmL> 
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@G@@@O 各 @ 
全 要 素 を 指定 する 


|* {人 @} 


人 @ プロパティ: 値 : 


状 暗 39 ナー ツユ 必 員 


適用 可能 な 要素 族 YE 


F| を 指定 する と 、 す べ て の 要素 を 対象 
こ ス タイ ル を 指定 する と いう 意味 に な り ま 
す 。 これ を 「 ユ ニ バ ー サ ル セ レ クタ 」 と 呼 
び ま す 。 

*. ク ラス 名 」 は 「. ク ラス 名 」 と 同じ 意 
味 に な り ま す 。 ま た 、「* 章 D] は 「 電 D] 
と 同じ 意味 に な り ま す 。 

サン プル で は 、style 要 素 で すべ て の 要 
素 の 文字 色 を オレ ンジ に 指定 し て いま す 。 
その た め 、 ブ ラウ ザ で 表示 し た と き に 、 
div 要 素 の 文字 も 、p 要 素 の 文字 も や オレン 
ジ で 表示 され る こと が わか り ま す 。 


ト 


ス 
タ 
イ 
ル 
ン 
| 
ト 
の 
適 
用 
対 
介 


| サン プル ソー ス 


<!DOCTYPE html> | ブラ ウザ 表示 

<htmt tang="]a"> 

<head> 

<meta charset=Wutf-8!> や 
<titte> す べ て の 要素 </titte> Mo 
<styLe> か いた ぶ 
* † cotor: orangei ん と で っ っ 
だ な て が 
く /styte> 間 LA 
</head> 回 の の 

く body> 6 

ここ は div 要 素 、 下 は p 要 素 


<div> こ こ は div 要 素 、 下 は p 要 素 </div> ンー 
<p> す べ て の 要素 の 文字 が オレ ンジ 色 に な り ま す 。</p> すべ て の 要素 の 文字 が オレ ンジ 色 に な り ま す 。 
</body> 
</htmt> 
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SG@@@O す @ 


ス 
1 ーー 1 3 タ 
指定 の ID や クラ ス を 持つ 要素 を 指定 する 々 ? 
4 
L 
{ 圏 } 呈 
{ 置 } 本 
・ ID 名 
・ クラ ス 名 
… プロ バテ ィ : 値 : 
適用 可能 な 要 索 匠 Yq:: よ コ 
2 
「 章 D] の 形 で セレ クタ を 指定 する と 、 で 、 ク ラス は 同じ 値 を 複数 指定 で きま す が 、 
属性 が 指 EE ID は 同じ 値 を 一 度 し か 指定 で きま せん 。 
スタ イル を 指定 する こと が で きま す 。 この サン プル で は 、「kyoho] と いう id 属性 
セレ クタ を 「|D セ レク タ 」 と 呼び ます 。 値 の 文字 色 と 、「delaware] と いう class 
また 、「. ク ラス 」 の 形 で セレ クタ を 指定 属性 値 の 文字 色 を 指定 し て いま す 。 そ の た 


する と 、 そ の 要素 の 中 で 、class 属 性 が 指 
定 し た 値 に な か っ て いる も の だ け に スタ イル 
を 指定 する こと が で きま す 。 こ の セレ クタ 
を 「 ク ラス セレ クタ 」 と 呼び ます 。 

ID と クラ ス の 違い は 、 ひ と つの HTML 
ファ イル 内 に 同じ 値 を 複数 指定 で きる か 
どう か で す 。 ひ と つの HTML ファ イル 内 


め 、 ブ ラウ ザ で 表示 し た と き に 、 そ れ ら の 


部 分 が 異な っ た 文字 色 で 表示 され る こと が 
わか が り ま す 。 


| ブラ ウザ 表示 


< く !DOCTYPE htmt> 

<htmt tang= リ ja"> 

<head> 攻 癌 淫 

く styte> 

#kyoho { cotor: purpLei } 

detaware { cotor: mediumviotetredi } 
馬 語 肖 </styte> 

</head> 

<body> 葉 下 当 

<p> 一 般 の p 要 素 で す 。</p> 

<p 1d="kyoho"> 「kyoho] の id 属性 が 付い た p 要 素 
で す 。</p> 


く /body> 
< く /htmt> 


<p class="detaware">ctass 属 性 の 値 が 「detawarel の p 要 素 で す 。</p> 
<p ctass="detaware"> こ れ も 、ctass 属 性 の 値 が 「detawarel」 の p 要 素 で す 。</p> 


夫 


一 般 の p 要 素 で す 。 
「kyoho」 の iq 属性 が 付い た p 要 素 で す 。 
class 属 性 の 値 が 「delaware」 の p 要 素 で す 。 


これ も 、class 属 性 の 値 が 「delaware」 の p 要 素 で 
す 。 


N 
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2.2 


@@⑥@@OW@ 


イ 特定 の 組み 合わ せ の 要素 を 指定 する 
1 @[ 男 ] 
の ム @[ 国 } 
時 ^ ム >⑱[ 画 } 
人 全 + 参 { 圏 } 
全 人 @{[ 圏 } 


介 … スタ イル を か ける セレ クタ (要素 名 、 草 名 、. ク ラス 名 ) 
全 … セレ クタ (要素 名 、##D 名 、. ク ラス 名 ) 
圏 … プロ バテ ィ : 値 : 

適用 可能 な 要素 :AXd の EE 


「h1 要素 の 次 の D 要 素 ] 「div 要 素 の 子 要 ト 記 の 表 の 各 セ レク タ を 、 上 か ら 順 に 「 タ 


4 素 の p 要 素 ] な ど 、 様 々 な 要素 の 組み 合わ イブ セレ クタ ]「 子 孫 セ レク タ | 「 子 セレ ク 
ユ ス | せ を セレ クタ で 示す こと が で きま す 。 夕 |] 「 隣 接 セ レク タ 」「 間 接 セ レク タ 」| と 呼 
レ / び ま す 。 
イ 
間 セレ クタ 対象 と な る 要素 例 例 の 意味 
| 要素 要素 P p 要素 
中 要素 1 要素 2 要素 1 の 子 押 要 素 の 要素 2 div p di 要素 の 子 多 要素 の p 要素 
適 要素 1 > 要素 2 要素 1 の 子 要素 の 要素 2 div > p div 要素 の 子 要素 の p 要素 
衣 要素 1 + 要素 2 要素 1 の 直後 の 要素 2 ht > p h1 要素 の 直後 の p 要素 
象 要素 1 要素 2 章 2 1 の 後に 細 人 h1 要素 の 後に 
< く !DOCTYPE hm1> 
<htmt tang=!"a"> い 提 
<headz 放 部 当 人 
<style> Sr y いし を 
div > p { border: 1px sotid gotdi } つつ )) す なる 
h1 + h2 { background-cotor: gotd: + と 2 ト い 
放出 衣 </styte> も 人 か 
</head> | ご 四 の 
< く body> 1 
| 
<div> 
<h1>h1 要 素 </h1> hl 要素 
<h2>h1+h2 の 対象 </h2> 
</div> | | 
</body> [ ー div>p の 対象 。 _ 
| く /htmt> 
N 
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@e@eeo@ 


Mielealb 


な [人 =" 較 ] { 

人 の [ 全 -=" 圏 "] [ 
し し UEU MM { 
信人 AS=" 圏 中 { 
人 @[ 人 人 *=" 較 円 { 
但 [ 人 A | =! 語 "] { 


適用 可能 な 要素 前 Ad の: も 


オキ 圏 と @⑯ 


… 要素 名 
… 属性 名 
… 属性 値 
… プロ パテ ィ : 値 : 


セレ クタ と し て 、「 要 素 [ 属 性 …]] の よ 
うな 形 で 指定 する と 、 特 定 の 属性 が ある 要 
素 や 、 属 性 が 特定 の 値 を 持つ 要素 に 対し て 、 
スタ イル を 指定 する こと が で きま す 。 この 
よう な セレ クタ を 「 属 性 セレ クタ | と 呼び 
ます 。 

属性 セレ クタ と し て 、 下 記 の 種類 が 定義 
され て いま す 。 


* 属性 名 …a[titte] など 
* 属性 名 と 属性 値 …[type="text"] な ど 


* 属性 名 と 属性 値 の 中 の ひと つ … 
div[ctass<="main"] な ど 

*・ 属性 名 と 属性 値 の 最初 の 文字 … 
a[href^="https"] な ど 

* 属性 名 と 属性 値 の 最後 の 文字 … 
a[hrefs="htmt"] な ど 

* 属性 名 と 属性 値 の 中 の 文字 … 
p[titte*="HTML"] な ど 


・ 属 性 名 と 属性 値 も し く は ハイ フン 「-」 
で 区 切ら れ た 局 性 値 の 最初 の 文字 … 


a[hreflang|="en"] な ど 


く ! DOcTyPE htmt> 

<htmt tang="]a リ > 

<head> 記 回 

く styLe> 

p[titte] { background-cotor: Lightcorati + 
/* セレ クタ 1 */ 

P[titte="Hetto] {[ cotor: darkgreens 
セレ クタ 2 */ 

EE 敵対 /styLe> 

</head> 

<body> 攻 正当 

<p> 通 常 の p 要 素 </p> 

<p titte=" タ イト ル ">titte 属 性 が ある p 要 素 (セレ ク 
タ 1 が 適用 ) </p> 

<p titte="HeLto>titte 属 性 の 値 が 「Hetto| の p 
要素 (セレ クタ 1 と セレ クタ 2 が 適用 ) </p> 

</body> 

< く /htmt> 


84 


通常 の p 要 素 
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装 間 9 ケー バ だ さ ぬ ハ 


4 
ス 
タ 
イ 
ル 
ジ 
| 
ト 
(の) 
適 
用 
対 
象 


装 有 ナー ツマ で へ 必 


ト 


ス 
タ 
イ 
ル 
シ 
I 
ト 
の 
敵 
用 
対 
旬 


G|@⑥@@O*@ 
ユー ザー 操作 で 変化 する 要素 を 指定 する ① 


参 :Hink { 信 } 
svis1ted { 全 } 
倫 :hover { 人 } 
免 :active { 含 } 氏 … 要素 名 
勉 :focus { 全 } ム … プロ パテ ィ : 値 : 


適用 可能 な 要素 陳 :Yq の E: も う 


ユー ザー の 操作 に よっ て 状態 が 変化 し た 
要素 に 対し 、 そ の 状態 に よっ て スタ イル を 


* :focus… 対 象 の 要素 に フォ ー カ ス が あ 


切り 替え る こと が で きま す 。 下記 の 比島 

ラス と 呼ば れる 記述 を 使い ます 。 サン プル で は 、a 要 素 の 状態 に よっ て 異 
| な る スタ イル を 指定 し て いま す 。 そ の た め 、 

"lo 用 の リン クウ ブラ ウザ で 表示 し た と き に 、 訪問 済み の リ 

* Visited… 訪 問 済め の の リン ク ンク の と き は 文字 色 が 「darkseagreen] 


*・ :active… 対 象 の 要素 が アク ティ ブ 化 さ 


に な り 、 マ ウス オー バー し た と き は 下線 が 
れ て いる と き (マウ ス で クリ ッ ク し て 


な く な り 、 リ ンク を クリ ッ ク し た と き に は 


いる 間 な ど ) 

ン が 表示 され 、 フ ォ ー カ ス が 
hover・ マ ウス ポイ ンタ 等 、 対 条 の  /。 っ てい る の と き は 間 Peel 
要素 の 範囲 内 を 指し た と き 


で 表示 され る こと が わが かがり ます 。 


<!DOCTYPE htmL 
<htmtL tang="]a"> 

<head> 攻 当 当 

く styLe> 

aitink { cotor: darkgreeni + 
azvisited { cotor: darkseagreenj 
aihover { text-decorat1on: nonei 
aiactive { outLine: 3px soLid gotd: + 
aifocus { background-cotor : gotd: + 
E 測 </styUe> 

</head> 

<body> 葉 衣 | 
<p><a href="http://g1hyo.jp/"> 技 術 評論 社 の サ 
イト </az</p> 人 
<p><a href="http:/ /www.yahoo・.co.]jp/ ">Yahoo | | 
の サイ ト </a></p> ] 
</body> Yahoo の サイ ト 
</htmt> 


マソ ュ ジ ドロ 
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2eeeoW み 
ユー ザー 操作 で 変化 する 要素 を 指定 する ② 


勉 :enabted { 人 } 
借 :disabted { 全 } 
勉 :checked { 全 1 


人 @ ぐ … 要素 名 
全 … プロ パテ ィ : 値 : 


ス 
多 
イ 
ル 
シ 
| 
ト 
の 
基 
本 


適用 可能 な 要素 六 : 愉 YE 


フォ ー ム の 要素 に つい て 、 有 効か 無効 か な お 、:checked 疑 似 2 カ ラス で 、 チ ェ ッ 
に よっ て 表示 を 変え た い 場 合 や 、 チ ェ ッ ク クボ ックス や ラジ オ ボ タ ン に スタ イル が あめ 
され て いる (また は 項目 が 選択 され て いる ) た ら な く て も 、 隣 接 セ レク タ で その 隣 の 
が か どう か が で 表示 を 変え た い 場 合 、 下 記 の 擬 label 要 素 に スタ イル を 設定 する と 動作 し 
似 ク ラス が 利用 で きま す 。 ます 。 


*・ :enabled… 有 効 な 要素 

・:disabled… 無 効 な 要素 

* :Checked… チ ェ ッ ク が オン に な っ て い 
る 要素 や (チェ ッ ク ボ ックス プラ ジオ 
ボタ ン )、 選 択 さ れ て いる 要素 (セレ ク 
ト ) 


<!DOCTYPE html> 


<htmt tang="]a"> 

<head> 攻 汰 肖 

く styLe> 

jenabted { background-cotor: yeLLow: +} 
idfsabted { background-cotor: 
temonchiffoni cotor: grayj } 

< く /styte> 

</head> 

く body> 

く p> く 1nput type="text!" name=" て tx て 1!" vatue=! 
入力 で きま す "><br> 

<1input type="text"' name="txt2" vatue=" 入 力 | で きま すず | | 
不可 " disabted="dsabLed"></p> PE IAN 
く </body> 
</htmt> 


vs 計 SW で 


いと 
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@@el@0 香 9 
特定 の 場所 や 痕 給 て 要 球 を 指定 する (① 


| 信 :first-chitd { 圏 } 

六 人 で :Last-chitd { 圏 } 

| 人 :onty-chitd { 圏 } 

。 | 人 @:nth-chitd( 全 ) { 圏 } 

- 。 坦 :nth-tast-chitd( 全 ) { 圏 } 


ス 
ダ 
イ 
ル 
ジ / 
| 
ト 
の 
其 
本 


@ 要素 名 
全 … 要素 の 順序 を 示す 数 字 、 数 式 、 キ ー ワ ー ド 
2 も 者 すべ て の 要素 圏 … プロ パテ ィ : 値 : 


式 で に 値 に な る 子 要素 
ご 、 還 の 人 斬 に じ て スタ イル 細 EE 
定 する 場合 、「 疑 似 ク ラス 」 を 使い ます 。 人 る に は 要素 の 順序 を 示す 数 字 、 数 式 、 キ ー 
ス 順序 に 関係 する 疑似 カラ ス に は 、 下 記 の _ ワー ド が 入り ます 。 
細 も の が あり ます 。 。 還 
ィ ・ 数字 数字 が 要素 の 順序 を 示し ます 。 
M 。 :first-chitd… 最 初 の 子 要素 ・ 数 式 …2n や 3n+1 と いっ た 数 式 で 要素 
1 。 :tast-chitd… 最 後 の 子 要素 の 順序 を 示し ます 。 n に は 0 か ら 始 まる 
贈 ・:onty-chitd… 唯 一 の 子 要 素 整数 が 入り ます 。 
相 議 ・:nth-chitd( ム )… 子 要素 の 中 で 、 先 ・ キ ー ワ ー ド 友 数 番目 (odd)、 個 和 番 
対 頭 か ら 順に 数 えた と き に 、 順 序 が 式 で 目 (even) を 示し ます 
旬 中 と 値 に . 
指定 し た 値 に な る 要素 な お 、:first-child の み 、IE7 以 降 で サポ ー 
*・:nth-tast-ch11d( 合 )… 子 要素 の 中 ト し て いま す 
で 、 最後 か ら 順 に 数 えた と き に 、 順 序 還 還 
サン ブル ソー ス Hi 
<!DOCTYPE html> ブラ ウザ 表示 
<html tang=" お a"><head> 攻 沖 当 
<styLe> 、 乗 4 
divifirst-chiUd {t background-cotor: greeni + RU の 
divitast-chitd { background-cotor: redi + な 3 提 ん 
世 汰 人 /styte> 夫 に 
</head> <body> ぼ ほ " い 
<dtv 1d=sampLe"> だ か 
<div> 先 頭 の div 要 素 (「#sampte ti:first-chitd] も 
の 対象 ) </div> | 回 の 
<div>2 番 目 の div 要 素 </div> 
<div> 最 後 の div 要 素 ([#sampte Li:tast-chitd] 
の 対象 ) Nd 最後 の div 要 素 ( sample lElastchild」 の 対象 ) 
く /d1v> 
く /body></htmt> し ー ブ 
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へ 


倫 :tast-of-type { 圏 } ⑯ 要素 名 
坦 :onty-of-type { 較 } 人 … 要素 の 順序 を 示す 
鍛 :nth-of-type( 信 ) { 細 } 数 字 や 数 式 


鍛 :nth-tast-of-type( 信 ) { 較 } 國 … ブロ パテ ィ : 値 : 


適用 可能 な 要素 前: の E:E き 


前 節 の 「nth-child] な ど と 似 て いる 疑 一 方 、「nth-oftype」 等 で は 、 セ レク 
似 ク ラス と し て 、「nth-of-type] な ど が タタ の 対象 に な ら な い 子 要素 は カウ ント し ま 
あり ます 。 せん 。 

両者 の 違い は 、 子 要素 の 中 に セレ クタ の 


対象 に な ら な い 要 素 が あめ る と き に 、 そ れ も 

順番 に カウ ント する か どう か で す 。 
「nth-child] 等 で は 、 セ レク タ の 対象 に 

な ら な し 要 素 も 、 順 番 に カウ ント し ます 。 


<!DOCTYPE html> 


<htmt tang="a"><head> 攻 問 当 
く <style> 

pifirst-of-type { background-cotor: peachpuffi + 
p:Last-of-type { background-cotor: pinki } 
[中 申す お ゅ AE 

</head> 

<body> 共 運 当 

<div>div 要 素 </d1v> 

<p> 最 初 の p 要 素 ([p:first-typel の 対象 ) </p> 

<p>2 番 目 の p 要 素 </p> 

<p> 最 後 の p 要 素 ([p:tast-typel の 対象 ) </p> 
<div>div 要 素 </d1v> 

</body> 

く /htmt> 


最後 の p 要 素 ( 「#sample pasttype」 の 対象 ) 
div 要 素 


ス 
タ 
イ 
ル 
ジン 
| 
ト 
の 
基 
本 
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2.2 5.1 


@@ee@O ゃ ぁ 
要素 内 の 1 行 目 や 1 文字 目 を 指定 する 


鍛 ::first-Line { 全 1 
鍛 ::first-Letter { 全 } 


坦 要素 名 
人 A ム … プロ パテ ィ : 値 : 


装 朋 テー ツユ 


適用 可能 な 要 索 陳 S@ の EE 


素 内 の 1 行 目 や 1 文字 目 だ け に 、 他 と CSS レベ ル 2 ま で は 、 疑 似 要 素 は 「:first- 
は 異な る スタ イル を 適用 し た い 場 合 が あり Iine] の よう に 「:」 は 1 個 で し た 。 

ます 。 この よう に 、 要 素 内 の 一 部 分 に スタ 一 方 、CSS レ ベル 3 で は 、 擬 似 要 素 は 
を 適用 し た り 、 要 素 に 何 か を 追加 し 「::first-line] の よう に 「:」 を 2 個 書 く よ 
た りす る 場合 に 使う 書き 方 を 、「 疑 似 要素 ] つう に 変わ っ て いま す 。 

と 呼び ます 。 な お 、IE8 は [上 :」 1 個 の 
要素 内 の 1 行 目 や 1 文字 目 に スタ イル を し て いま す 。 

適用 する 場合 、 下 記 の 擬似 要素 を 指定 し ま 

す 。 


*・ ifirst-Line… 要 素 内 の 1 行 目 
・:ifirst-Letter… 要 素 内 の 1 文字 目 


4 


叶 さ 方 の の 対応 


ll 


ブラ ウザ 表示 


<!DOCTYPE htmt> 

<htmt tang="]a リ > 

<head> 

く styLe> 

P::first-Line { background-cotor: goldi + 
Pi:if1rst-tetter 1 font-size: 300%』 color: 
olivedrabj 

< く /styLe> 

< く /head> 

<body> 攻 正当 

<p> 要 素 内 の 1 行 目 や 1 文字 目 だ け に 、 他 と は 異な る スタ 
イル を 適用 し た い 場 合 が あり ます 。 放 正 当 </p> スタ イル を 遼 用 し た い 場合 が あり ます 。 こ の よう に 、 
</body> 要素 内 の 一 部 分 に スタ イル を 遠 用 し た り 、 要 素 に 何 か 
</htmt> を 追加 し た りす る 場合 に 使う 書き 方 を 、「 疑 似 要 素 」 
| と 呼び ます 。 
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ラメ 


2.2 


geeeo#@ 
要素 の 前 後 を 指定 する 


介 ::before { 全 } 
但 ::after { 今 } 
便 … 要素 名 
人 … プロ パテ ィ : 値 : 


スズ 
タ 
イ 
ル 
シ 
| 
ト 
の 
基 
本 


適用 可能 な 要素 放 :XE ま 


要素 の 前 後に 、 文 字 や 画像 等 を 表示 し た ル 2 ま で は 、「:before] の よう に シ 
い 場 合 に は 、「::before] と 「::after] の _ が ひと つ だ け で し た 。 
疑似 要素 を 使い ます 。 な お 、IE8 は 「:」 1 個 の 書き 方 の み 対応 

要素 の 前 後に スタ イル を 適用 する 場合 、 し て いま す 。 
下記 の 角 似 要素 を 指定 し ます 。 


・:ibefore… 要 素 の 前 に 表示 する 内 容 


・::after… 要 素 の 後ろ に 表示 する 内 容 ブラ ウザ 表示 
:pefore:iafter セ レク タ で は 、 表 示 PR 

する 内 容 を 「content] と いう ブ プロパ ティ 

で 指定 し ます 。 る 
:first-line 疑似 要素 と 同様 に 、CSS レベ を さ も 

| ルフ ウル ジー ス before 疑似 要素 の after 疑似 要素 

<!DocTYPE html> 

<htmtl tang="a"> before 疑 似 要素 ・after 疑 似 要 素 G 

WP 太 before 疑 似 要 素 を 使う と 、 要 素 の 先頭 に 文字 等 を 

追加 する と と が で きま す 。 

AH after 刀 要素 を 使う と 、 要 素 の 最後 に 文字 等 を 追加 

piiafter { content: “Ocotor: redi } する と と が で きま す 。 

EE/styUe> o 

</head> 

<body> 攻 引当 し 


<p>before 疑 似 要素 ・after 疑 似 要 素 </p> 
<p>before 疑 似 要素 を 使う と 、 要 素 の 先頭 に 文字 等 を 追加 する こと が で きま す 。<br> 
after 疑 似 要素 を 使う と 、 要 素 の 最後 に 文字 等 を 追加 する こと が で きま す 。</p> 
</body> 

く /htmL> 


関連 : 
いつ)】 追加 する コン テン ツ を 指定 する (P.263) : 181 


8elelelol 才 9 
その 他 の セレ クタ で 指定 する 


構 草 :root { 含 } 

に 3 但 :empty { 全 } @ 要素 名 

但 :target { 全 } 4^ … プロパティ : 値 
| 欠 :tang( 還 ) { 全 } 言語 コー ド 

、 鍛 :not( 文 ) { 全 }] 。  … セレ クタ 


すべ て の 還 
:root 疑 似 ク ラス :lang 擬 似 ク ラス 


文書 の ルー ト と な る 要素 を 表し ます 。 言語 に 応じ た スタ イル に は 「:tang( 圏 )」 
HTML で は html 要 素 に スタ イル を 指定 す 疑似 ラス を 使い ます 。 に は 、 言 語 を 表 


状 昌 テー ツマ で へ 改 


4 る 動作 に な り ま す 。 す コ ー ド を 指定 し ます 。 IE8 以 降 で サポ ボー 
:empty 疑似 フラ ス ト し て いま す 。 
その セレ クタ に 合致 する 要素 が 、 子 要素 :not 疑 似 ク ラス 
(テキ スト を 含む お) を 持た な いこ と を 表し 「 坦 :not( 文 )] の セレ クタ は 、 倫 に 合致 
ます 。 する 要素 群 か ら 、 支 に 合致 する 要素 群 を 
:target 擬 似 ク ラス 除く こと を 表し ます 。 ま た 、「Ainot(B) 


a 要 素 を クリ ッ ク し て ペー ジ 内 の リン ク snot(C):…| の よう に 、「:not( 〇 )] を 
先 に 移動 し た と き 、 リ ンク 先 に 特定 の スタ 続け て 書い て 、 そ れ ら の 条件 を 満た す 要素 
イル を 適用 する こと が で きま す 。 を 除く こと も で きま す 。 


サン プル ソー ス 
く !DOCTYPE htmL> 
<htmt tang="]a"> 5 Fe 
<head> 葉 品 当 ブラ ウザ 表示 
く sty Le> 
:root { background-cotor: darkorangei } 
div:tang(en) { background-cotor: tomatoj } 
pinot( .note) { background-cotor: olivedrab:i + 
[中略 9 人 39AC に 2 
く /head> 
<body> 攻 問 当 
<p> ク ラス の な い p 要 素 </p> 
<p class="note'>note ク ラス の p 要 素 </p> 
<div tang="en">This 1s EngLish. く </d1v> 
< く /body> 
</htmL> 


関連 
182 : お ) 属性 値 の パリ エー ショ ン (P.28) 


Chapter 4 


CSS 
プロ バテ ィ リ ファ レン ス 


フォ ント 15] 
テキ スト 16」 
17 月 了 

ポー ター 
リス ト (19 | 
テー ブル 20】 | 
表示 と 配置 21」 ( 
イン ター フェ イス を の | 
思 ne 23) “ 1 
トラ ンス フォ ー ム を の [ ] 
トラ ンジ ショ ン 人 ② こ 
アニ メー ショ ン 26) 


( 
8 
8 
4 
ロ 
バ 
ィ 
リ 
ラ 
ア 
レ 
シン 
ス 


文字 の 表示 フォ * 


ント を 指定 する 


4 font-famiuy: 夫 : 


EE も: 得 すべ て の 要素 


@ … フォ ント 名 や ーー 般 化し た フォ ント ファ ミリ ー 名 


font-family プロ パテ ィ は 、 文 字 の フォ 
ント を 指定 する プロ パテ ィ で す 。 

個 吊 の フォ ント 名 か 、 一 般 化 し た フォ ン 
ト フ ァ ミ リー 名 の 値 を 、 コ ンマ で 区 切っ て 
癌 べ ま す 。 

一 般 化 し た フォ ント ファ ミ 
て 、 ト 下記 の 値 が 利用 で きま す 。 


* serif… 飾 りつ き の フ ォ ン ト ( 明 朝 な ど ) 

・ sans-Serif… 飾 り が な い フ ォ ン ト ( ゴ 
シッ ク な ど ) 

* CUrSive… 筆 記 体 の フォ ント 


| リン フル ソー ス 詳 議 較 較 請 請 請 


く !DOCTYPE htmt> 

<htmt tang="]a"> 

<head> 葉 還 肖 

く styLe> 

p { font-famity: "Hiragino Kaku 
Gothic Pro', "ヒラ ギ ノ 角 ゴ Pro W3"。 
Meiryo, "MS _PGothic"。 sans-serif: + 
中 星 3 人 GSAK ジ 2 

く /head> 

く body> 

<p>Windows で 見 る と メイ リオ か が MS _P ゴ シッ ク で 
表示 され 、Mac で 見 る と ヒラ ギ ノ 旋 ゴ シッ ク で 表 
示さ れ ま す 。</p> 

< く /body> 

く /htmt> 


リー 名 と し 


・ fantasy… 装 飾 的 な フォ ント 
・ monospace… 等 悦 の フォ ント 


初期 値 は 、 ブ ラウ ザ ご と に 指定 され て い 
る フォ ント に な り ま す 。 

Web ブ ラウ ザ は 、 そ れ ら の フォ ント を 
左 か ら 順 に 調べ 、 最 初 に マッ チ し た だ フォン 
ト で 文字 を 表示 し ます 。 

な お 、 フ ォ ン ト 名 に スペ ー ス を 含む 場合 
は 、 フ ォ ン ト 名 の 前 後 を 「"」 で 囲み ます 。 


ブラ ウザ 表示 


人 1 
LN 3e? 


Windows で 見 る と メイ リオ か MS P ゴ シッ ク で 表示 
され 、Mac で 見 る と ヒラ ギ ノ 角 ゴ シッ ク で 表示 され 


ます 。 
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@eee@o#@ ぁ 


文字 の 大 き さ を 指定 する 


に | font-s1ze: 旬 : 


EC を E 種 すべ て の 要素 


信 文字 の 大 き さ を 示す キー ワー ド や 数 値 


font-size プロ パテ ィ は 、 文 字 の 大 き さ 
を 指定 する プロ パテ ィ で す 。 

「xx-smalll な どの キー ワー ド で 指定 す 
る 方 法 と 、 数 値 や パー セン ト で サイ ズ を 指 
定 する 方 法 が あり ます 。 

指定 で きる キー ワー ド は 下記 の と お り で 
す 。 


【 絶 対 指定 】 

*s XX-Small…medium の 0.6 倍 

*s x-Small…medium の 0.75 倍 

* Small…medium の 約 0.89 倍 (9 分 の 8) 
> medium… 通 常 サ イズ : 初期 値 

* large…medium の 1.2 倍 

* x-large…medium の 1.5 倍 


| サン フル ソー ス 詳 較 詳細 間 較 | 


く !DOCTYPE htmL> 

<htmt Lang="a"> 

<head> 葉 寺 肖 

く styLe> 

body { font-size: 12pxj } 

p { font-fam1ity: "Hiragino Kaku 
Gothic Pro",。 リ ヒラギノ 角 ゴ Pro W3"。 
Meryo, "MS PGothic"。 sans-ser1if: + 
・fs1 { font-s1ze: 24px: } 

.fs2 { font-s1ze: 399%: } 

放 着 当 </styte> 

く /head> 

く <body> 

<p class="fs1">24px で 表示 </p> 

<p cuass="fs2>36px で 表示 </p> 
</body> 

く /htmt> 


*・ xxX-large…medium の 2 倍 


【 相 対 指定 】 

・ larger… 親 要素 の フォ ント サイ ズ よ り 1 
段階 大 きい 

*・ Smaller… 親 要素 の フォ ント サイ ズ よ 
り 1 段 階 小 さい 


パー セン ト で 指定 し た 場合 、 親 要素 の 
フォ ント サイ ズ に 対す る 割合 を 指定 する 形 
に な り ま す 。 


ブラ ウザ 表示 


24px で 表示 
36px で 表示 
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@@ee@Oo ゃ @ 


C 

$ 文字 の 太 さ を 指定 する 

X 開 

| に 。 Tont-weght: 急 : 

P |  @ 文字 の 太 さ を 示す キー ワー ド や 数 値 
ン 

ス 


だ 選 貞 も 得 すべ て の 要素 


font-weight プ ロ パ ティ は 、 文 字 の 太 ・normal:… 通 常 (数 値 で 400 を 指定 し 
さ を 表 す プ ロ パ ティ で す 。 た と き と 同 じ ) : 初期 値 
[normall 等 の キー ワー ド で 指定 する か 、  ・bold… 太 字 (数 値 で 700 を 指定 し た と 
また は 100 一 900 の 100 刻 み の 数 値 で 指 き と 同 じ ) 
定 し ます 。 数 値 の 場合 、 値 が 大 きく な る ほ  * bolder… 継 承 し た 値 よ り 太い 
ど 文 字 が 太く な り ま す 。 ・ lighter… 継 承 し た 値 よ り 細い 
指定 で さき る キー ワー ド は 次 の と お り で す 。 


M 必 2 納 2 入 
く !DOCTYPE html> 
<htmt tang="]a"> 
<head> 葉 半 肖 
<styLe> 
Pp { font-famity: "Hiragino Kaku Gothic Pro", "ヒラ ギ ノ 角 ゴ Pro W3"。 Mejryo, "MS 
Peothic", sans-ser] 和 fi + 1 


-wn { font-weight: normati + ブサ ラウ ザ 表 示 

・wb { font-we1ght: botd: + 

記 記 :/styLe> 

</head> 人 ュ て エ ィ リャ > 
<body> 区 問 当 1 計 略 引か? た 、 は > 


<p class="wn"> 通 常 の 太 さ で 表示 され ます 。</p> 
<p clLass="wb"> 太 字 で 表示 され ます 。</p> 巡 

</body> NO Ns 
</htmLl> の レン 


通常 の 太 さ で 表示 され ます 。 
太字 で 表示 され ます 。 
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@@@@0『@ 


引 
文字 の 傾き を 指定 する 8 
構 | 台 
に 4 font-styte: 電 : 1 
| @ … イタ リッ ク 体 、 斜体 示す キー ワー ド 
ン 
ス 

【 週 用 可能 な 要素 度 YqOE ま 


font-style プロ パテ ィ は 、 文 字 を 傾け る  ・normal:… 通 常 の 表示 : 初期 値 
(斜体 に する) プロ パテ ィ で す 。 ・ Oblique… 斜 体 で 表示 
斜体 と イタ リッ ク 体 は 表示 が 似 て いま す  ・italic… イ タリ ッ ク 体 で 表示 
が 、 斜 体 は 単に 文字 の 形 を 傾け た デザ イン 
で す 。 一 方 、 イ タリ ッ ク 体 は も と も と 筆記 
体 で め ある た め 、 文 字 が 傾い いた も の で は あり 
ます が 、 小 文字 の a や f の 字 の 形 が 変わ り 


ます 。 
た だ 、obligue や italic が 用 意 さ れ て い 間 呈 WII 
な い フ ォ ン ト も 多く (特に 日 本 語 フ ォ ン PT 
5 こさ N の 
ト )、 そ の 場合 は 通常 の フォ ント に 傾斜 を 人 
ーー に 介 の PT に 
つけ た 表示 に な り ま す 。 人 
1 ある > て 話 
信 2 スズ 層 
<iDOCTYPE htmt> ウ 
<htmt Lang=!a リ > 
<headzE 還 当 Gill Sans と Trebuchet MS の イタ リッ ク 体 は a, 
<styte> f の 形 に 注目 ! 
p { font-famity: "GLL Sans"。 "Trebuchet MS + 
.S1 { font-styte: taLuici } abcdefghjikimnopqrstuvwxyz 
DE cbcde 大 mnopgcstuwod 
<body> 
中 中 了 


<p>GiLL Sans と Trebuchet MS の イタ リッ ク 体 は a。f の 形 に 注目 ! </p> 
<p>abcdefgh1]KLmnopqrstuvwxyzZ く /P> 

<p ctass="s1">abcdefgh1]kLmnopqrstuvwxyz く /p> 

</body> 

く </htmt> 
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2e@eeo#@ 
和文 字 の スモ ー ル キャ ッ プス を 指定 する 


に | font-variant: 人 
人 スモー ルキ ャ ピタ ル を 示す キー ワー ド 


(の 
回 
8 
プ 
ロ 
パ 
イィ 
リ 
の 
4 
レ 
0 
ン 1 


適用 可能 な 要素 陳 :S@ の E ま 


font-variant プ ロ パ ティ は 、 ア ルフ ァ その た め 、 ブ ラウ ザ で 表示 し た と き に 、 
ベッ ト の 小文字 を 、 小 さ な 大 文字 に 変換 す 「Gijutsul の 「ijutsu」 が 小さ い サ イズ の 


る 際 に 使い ます 。 大 文字 で 表示 され る こと が わか り ま す 。 
指定 で きる キー ワー ド は 以下 の と お り で 
す 。 


* normal… ス モー ルキ ャ ピタ ル で 表示 し 
な い : 初期 値 
* small-caps… ス モー ルキ ャ ピタ ル で 表 


示す る ブラ ウザ 表示 開 
サン プル で は 、「GiUtsu] に スモ ー ル た 
キャ ピタ ル を する よう に 指定 し て いま す 。 いと と ("エー ジャ 、 証 で 0a 


ぐさ い な く 作 wa 


飛 ツブ プル ソーX 5 


く !DOCTYPE html> 
<htmt tang="a"> 
<head> 葉 部 肖 
<styLe> 
.fv-normat { font-variant: normati + と 技術 評 太 (Gijutsu, Hyota) は 言っ た 。 
ES RGM 。 六条 評 太 (Guumeu.Hyote) は 言っ た 。 


</head> 

<body> 
<p> と 技術 評 太 (Gijutsu, Hyota) は 言っ た 。</p> 
<p> と 技術 評 太 (<span cLass="fv-smaUl-caps">G1Jutsu</span> Hyota) は 言っ た 。</p> 
</body> 

< く /htmL> 
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geeeos る 
行 の 高 さ を 指定 する 


s 口 NI の の O 


に 
ン 


に Line-heght: 坦 : 
信 行間 を 示す 数 値 も し く は normal 


錠 
り 
フ 
4 
レ 
ン 
ス 


適用 可能 な 要素 議 :ASS の EE 


line-height プ ロ パ ティ は 、 行 の 高 さ を ます 。 
指定 する プロ パテ ィ で す 。 た だ し 、 行 間 が 「1]」 や 「1.5] な どの 
指定 で きる 値 は 以下 の と お り で す 。 よう に 単位 を つけ な いで 指定 し た 場合 、 そ 
直 時 に 
- 数 填 ノ パー セン ト - 対 象 の 要素 の フォ ン の 数 値 と それ ぞ れ の フォ ント サイ ズ に 掛け 


行間 が 計算 され ます 。 
ト サ イ ズ に 、 指 定 し た 数 値 や パー セン  ”] 凍 が 計 邊 され ます 


ト を 掛け 算 し た 高 さ 
* normal… ブ ラウ ザ ご と に 指定 され た 行 
間 : 初期 人 
_ _- 
行間 を 指定 し た 要素 内 に 複数 の フォ ント 0 
サイ ズ が 含ま れ て いる 場合 、 基 準 と な る xc が =tFcfW く 
フォ ント サイ ズ に 合わ せ て 行間 が 計算 され を ka に 


| サジ ブ ルソー ス ーー 


く !DOCTYPE htmt> 
+ ーー リネ っ リ y 
RE (行間 単位 な し 指定 ) 通常 の フォ ン M と 大 き 
<sty Le> い フ ォ ン ト サ イズ 
p { background-cotor: #Cccccc: } A 
en (fontrsizet apr 】 (人 あり 指 半 の フォ ント 3 
・Lh1 ine-heght: 2: 
.th2 { 億 Nr 2emi } 軸 い フ ォ ント サイ ズ 
中略 ば SA に 2 
く /head> し 
<body>E 部 肖 
<p ctass="th1"> (行間 単位 な し 指定 ) 通 常 の フォ ント サイ ズ と <span> 大 きい フォ ント サイ ズ </span></p> 
<p ctass="th2> (行間 単位 あり 指定 ) 通 常 の フォ ント サイ ズ と <span> 大 きい フォ ント サイ ズ </span></p> 
</body> 
く /htmt> 
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@ の eeeo% ぁ 
文字 スタ イ ル を 一 括 指 定 する 


回 rt 0 人 還る 


価 font-style の 値 

4 … font-variant の 値 

園 font-weight の 値 

文 … font-size の 値 . 

金 font-family の 値 一 括 指 定 


2 ま も 考 すべ て の 要素 


ae 
8 
8 
プ 
ロ 
バ 
ィ 
リ 
選 
Z4 
レ 
ウ 
4 


9 
font プ ロ パ ティ は 、 文 字 に 関す る スタ それ ら の プロ パテ ィ は 初期 値 を 指定 し た こ 
イル を まとめ て 指定 する プロ パテ ィ で す 。 と に な り ま す 。 

font-style/font-variant/font- 
weight font-size/font-family の 加 


4 ブラ ウザ 表示 
プロ パテ ィ の 値 を 指定 する こと が で きま こ 
に 6 計 な ぜ ? 介 の 日 還 晶 が 
ont-size プロ パテ ィ ( 娘 ) の 部 分 を 、 信 い て い 3 が >7 
[font-size プ ロ パ ティ /Iline-height プ キル しい 
パテ ィ 」 の よう に 書い て 、Iine-height プ 92 io 
パテ ィ を 一 緒 に 指定 する こと も で きま ヾ 
HE お] た 拓 イタ ワッ ク 其 、 基 字 、 フ ォ ン た サイズ 7gpx 
6 生 誠 2 の 、 フ ォ ント な と ラ ギ ノ 為 メイ クオ 、 
サン ブル ソー ス MS P プ シッ ク の い ず あ か で 表示 され ます 。 
<!DOCTYPE html> 
<htmt tang="]a"> 
<headz 攻 部 肖 N 
く styLe> 


.f { font: 1tauic botd 18px/2 "Hiragino Kaku Gothic Pro", "ヒラ ギ ノ 角 ゴ Pro W3"。 
Meiryo, "MS PGothic", sans-ser1 和 fi } 

</styte> 

く /head> 

< く body> 

EE 

<p ctass="f"> イ タリ ッ ク 体 、 太 字 、 フ ォ ン ト サ イ ズ 18px、 行間 2、 フ ォ ン ト は ヒラ ギ ノ 角 ゴ 、 メ イリ オ 、 
MS P ゴ シッ ク の いずれ か で 表示 され ます 。</p> 

く </body> 

</htmt> 


| 回 通 文字 の 表示 フォ ント を 指定 する (P.184)、 文 字 の 大 きき を 指定 する (P.185)、 文 字 の 太 さ を 指定 する (P.186)、 
190 の の 傾き を 指定 する (P.187)、 英 文字 の スモ ー ルキ ャ ッ プス を 指定 する (P.188) 、 
: 行 の 高き を 指定 する (P.189) 


る eeweos@ 
文字 の 色 を 指定 する 


| coLor: 夫 : 
||  @ 文 の 指定 


2 本 : 湯 すべ て の 要素 


Color プロ パテ ィ は 、 要 素 の 内 容 (テキ 
スト ) の 色 を 表し ます 。 

初期 値 は ブラ ウザ ご と に 指定 され て いる 
文字 の 色 に な り ま す 。 

サン プル で は 、「color プ ロ パ ティ 」 [名 
と いう テキ スト の 文字 色 を 指定 し て いま 
す 。 そのため 、 ブ ラウ ザ で 表示 する と 、 前 
者 は 赤色 、 後 者 は 青色 に で 表示 され る こと 
が わか り ま す 。 


フウ ルス 
く !DOCTYPE htmL> 
<htmL tang="]a"> 
<head> 
<meta charset=Wutf プ -8 リ > 
<titte> 文 字 の 色 </titLe> 
く styte> 
・c1 { cotor: redi + 
<c2 { cotor: #9999ffj } 
</styte> 
</head> 
く body> 


</span> を 表し ます 。</p> 
< く /body> 
< く /htmt> 


、 


ソラ ウザ 表示 作 間 


WEB 3-t〒 こ で 
見 も 、 て ? 
@:: 
そ h は 4 息 吉 太 


Color プ ロ パ ティ は 、 要 素 の 内 容 (テキ スト ) の 色 を 


表し ます 。 


<p><span ctass=Vc1">cotor プ ロ パ ティ </span> は 、 要 素 の 内 容 (テキ スト ) の <span ctass="c2"> 包 


ら の 属性 値 の バリ エー ショ ン (P.28) 
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s 口 の の O 


*ー 
そ 


イィ 
リ 
本 
ア 
レ 
ン 
ス 


ロロ NL! の の O 


に 
ーー の! 


ィ 
リ 
ヴ 
ア 
レ 
ン 
に 


2 を 51 を 


@eleeo# 


レフ 
Web 上 の フォ ント を 指定 する 


構 efont-facet 


ディ スク リプ タ 名 : 値 : 
ディ スク リプ タ 名 : 値 : 
| 負 用 可能 BZ ま 得 すべ て の 要素 


CSS3 新規 


@font-face ル ー ル は 、 サ ー バ 上 に ある 
フォ ント を Web サ イト で 扱え る よう に す 
る し くみ で す 。 一 般 に 、「Web フォン ト ] 
と 呼ば れ て いま す 。 

@font-face ル ー ル の ブロ ッ ク の 中 に 、 
font-family プ src/font-style/font- 
weight 等 の ディ スク リプ タ を 記述 し て 、 
フォ ント を 定義 し ます 。 


・ font-familty ディ スク リプ タ 
font-family デ ィ ス クリ プ タ で は 、 フ ォ 
ント 名 を 指定 し ます 。 


s src デ ィ ス クリ プ タ 

フォ ント ファ イル が ある 場所 を 指定 し ま 
す 。 サー バ か ら ダ ウン ロー ド す る 場合 は 、 
[src: urI( フ ァイル の アド レス )」 と 書 さ ま 
す 。Uurl の 後に 「format(( フ ォ ー マ ッ ト 名 )] 
を 付加 し て 、 フ ォ ン ト の フォ ー マ ッ ト を 指 
定 す る こと も で きま す 。 

な お 、IE で は 、EOT 形 式 の フォ ント に 
し か 対応 し て いま せん 。 


・ font-style /font-weight デ ィ ス クリ プ タ 
読み 込む フォ ント の イタ リッ ク 体 玄人 
ノ 太 さ な ど の 特徴 を 指定 し ます 。 


<!DOCTYPE htmLt> 


<htmL tang="a"><head> [中 略 ] 
<styLe> 
Gfont-face { 
font-famity: "Butterfly Effect" ぅ 
src: urL(UnT_efeitoBorboteta.eot) 3 
由 
font-face 
font-famity: "Butterfly Effect" ぉ 
src: urL(UnT_efeitoBorboLeta. て tf) 
format("truetype") ぅ 
2 
.f1 {font-fam1ty:"Butterfly Effect"5+ 
EE 麗 :/styLe> 
</head><body> 甘 当 8 
<p cLass="f1'>Web フ ォ ン ト で 表示 </p> 
<p> 非 Web フ ォ ン ト で 表示 </p> 
</body></htmt> M 


ブラ ウザ 表示 
祭 g。 く た 7 
偽 が 26e6 征 か 
江 理生 に な >。 る 


5 叶 py て た ? 


ME B フ ォ ン ト で 表示 


非 Web フ ォ ン ト で 表示 
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文字 の 傾き を 指定 する (P.187) 


| 関 軍 文字 の 表示 フォ ント を 指定 する (P.184)、 文 字 の 太 き を 指定 する (P.186) 、 


@G@@@O0O@ 


C 

英文 字 の 大 文字 ノ 小 文字 を 指定 する 8 
構 ) 刀 
| text-transform: 坦 : 
例 … 英文 字 の 大 文字 小文字 を 変換 する キー ワー ド 凍 

レ 


EE: 種 すべ て の 要素 


text-transforrm プロ パテ ィ は 、 文 章 中 - 、 _ 
こ あ る 英 単語 の 大 文字 ノ 小 文字 を 変換 す る * ful-width… す べ て 全角 に 変換 する ( 全 


処理 を 行い ます 。 角 が な い 文 字 は 変換 し な い ) 
指定 で きる キー ワー ド は 下記 の と お り な お 、 値 の 「fulLwidth] は CS5 レ ベ 
で ま ル 3 で 追加 れ ま し た 。 た だ 、 本 書 執筆 時 


点 で は 、fulLwidth に 対応 し た Web ブ ラ 


e 了 な い ) : 
none・… 変 換 し な い ・ 初期 人 ウザ は Firefox の み で し た 。 


* Capitalize… 各 単語 の 先頭 文字 を 大 文 


字 に 変換 し 、 そ の 他 の 文字 を 小文字 に 
変換 する ブラ ウザ 表示 


* UPDercase… す べ て 大 文字 に 変換 する 
・ lowercase… す べ て 小文字 に 変換 する 


呈 嘱 MHR 座 
く !DOCTYPE htmt> 
<htmt tang="ja"><head>E 下 当 
く <styLe> 
・tt_caps {text-transformicap1tal1zes+ Tyrannosaurus Means “Tyrant Lizard". 
・ モ t_upper {text-transformuppercasei+ 
・tt_tower {text-transform: Lowercasei+ 
中 略 /styLe> tyrannosaurus means “tyrant lizard". 
</head> 
<body> 了 E 病 当 
<p>Tyrannosaurus means &Ldquoityrant Lizard&rdquoi. く /P> 
<p ctLass="tt_caps">Tyrannosaurus means &Ldquojtyrant tizard&rdquoi. く </D> 
<p ctass="tt_upper">Tyrannosaurus means &tdquojtyrant Lizard&rdquoj. く /p> 
<p class="tt_tower">Tyrannosaurus means &Ldquojtyrant Lizard&rdquoj. く /D> 
</body> 
</htmL> 


Tyrannosaurus means "tyrant lizard". 


TYRANNOSAURUS MEANS “TYRANT LIZARD". 
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5.1 


@@@@0 重 @ 


スペ ー ス ・ タ ブ ・ 改 行 の 扱い を 指定 する 


構 
sl white-space: 坦 : 


@ スペ ー ス 、 タ ブ 、 改 行文 字 の 扱い を 指定 する キー ワー ド 


まま < 得 すべ て の 要素 


white-space プロ パテ ィ は 、HTML 文 
書 の 中 で スペ ー ス 、 タ ブ 、 改 行文 字 が 連続 
し て いる 場合 に 、 ひと つの スペ ー ス に 置き 
換え る か どう か や 、 改 行文 字 が ある 場合 に 
改行 する か どう か を 決め ます 。 また 、 内 容 
が ボッ クス か ら は み 出 し た と き に 、 折 り 返 


すか どう か を 決め ます 。 
指定 で きる キー ワー ド と その 効果 は 下記 
の と お り で す 。 
な お 、IE7 は pre-wrap、Dre-line に 対 
応 し て いま せん 。 


効果 normal Pe nowrap Pre-Wrap Pre-line 
連続 する スペ ー ス 、 タブ 、 

改行 文字 を ひと つの O X O に O 
スペ ー ス に 置き 換え る 

ボク クス の 5 は み 由 し た と き に っ 還 同 


MD 70 が re の 
<!DOCTYPE htmLl> 
<htmL tang="a リ "> 
<head>E 正 肖 
< く styLe> 
.ws_nowrap { white-space: nowrapi + 
.WS_PrewraD { white-SDace: Dre-WraDi } 
還 : 衣 /styte> 
</head> 
<body> 記 加 由 
<p> プ テラ ノド ンー 
歯 が な い ( も の ) </p> 
<p ctLass="ws_nowrap"> プ テラ ノド ンー 
歯 が な い ( も の ) </p> 
<p ctass="ws_prewrap"> プ テラ ノド ン テ 
歯 が な い (も の ) </p> 
</body></htmL> 


記 が あり 


プテラノドン = が あり 歯 が な い 
(も の ) 


プテラノドン = 押 が あり 歯 が な い (も の ) 


プテラノドン = 
歯 が な い (も の ) 


糞 が あり 


細 が あり 
机 が あり 
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KKUEL) 


単語 内 の 改行 を 指定 する 


構 
4| word-break: 雪 : 


人 単語 内 の 折り 返し 方 の 指定 


適用 可能 な 要素 衣 :RAYd の E 


CSS3 新規 


WOrd-break プロ パテ ィ は 、 単 語 の 途 
H で も 折り 返す か どう か を 指定 し ます 。 
通常 は 、 英 単語 や URL な どの 連続 し た 
半角 英 数 字 は 、 半 角 ス ペー ス が な いい 限り 折 
り 返 し ませ ん が 、 word-break プロ パテ ィ 
で 改行 させ る こと が で きま す 。 
指定 で きる 値 は 下記 の と お り で す 。 


・ normal… 一 般 的 な 表示 (日 本 語 や 中 国 
語 な ど は 文章 の 区 切り 以外 の 箇所 で も 
折り 返し 、 その 他 の 言語 で は 単語 の 途 
中 で は 折り 返 ぐ な い ) : 初期 値 

*。 break-all… 単 語 の 途中 で も 折り 返す 

・keep-all… 単 語 の 途中 で は 折り 返さ な 
い (日 本 語 や 中 国語 な ども 含む ) 


な お 、 値 の keep-all は IE と Firefox 以 
外 で は 実装 され て いま せん 。 

Opera で も 単語 内 の 改行 指定 を する 場 
合 は 、 よ く 似 た プロパ ティ で ある word- 
wrap プロ パテ ィ を 利用 する と よい で し ょ 
う ぁ 。 

word-wiap プ ロ パ ティ の 値 は 、 
normal こ と break-word を 利用 で きま す 。 
break-word は word-break プロ パテ ィ 
の break-all と 同じ よう に 機能 し ます 。 


ブラ ウザ 表示 
Irriceratopsmeansthree+Horn+face ーー イ 
トリ ケラ トブ スニ 3 本 の 角 に 


サン ブル ソー ス 
< く !DOCTYPE htmL> 
<htmt tang="]a"><head> 区 凍 当 
< く styLe> 
Pp { width: 299pxj } 

・wb1 { word-break: break-aLLi } 

・wb2 { word-break: keep-aLtj 

左 沿 : 衣 /styte> 

</head> 

<body>E 癌 当 明 
<p>Triceratopsmeansthree+horn+face<br> 


トリ ケラ ト プ ス = テ 3 本 の 角 を 持つ 顔 </p> 
トリ ケラ ト プ ス =3 本 の 角 を 持つ 顔 </p> 
トリ ケラ ト プ ス 3 本 の 角 を 持つ 顔 </p> 


</body> 
く /htmt> 


に ctass="!wb1>Triceratopsmeansthree+horn+face<br> 


<p ctLass="wb2">Triceratopsmeansthree+horn+face<br> 


を 持つ 顔 


riceratopsmeansthree+ M 
Orn+face y 
トリ ケラ ト プ ス =3 本 の 角 
を 持つ 顔 
riceratopsmeansthree+lorn+face 


トリ ケラ トブ スニ =3 本 の 角 
を 持つ 閣 
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1 

S Fー 5 の 3 

8 単語 内 の 改行 を ハイ フン で つなぐ 指定 を する 
バ 開 

1 に | hyphens: 劉 : 

双 @ 単語 内 の 改行 を ハイ フン つなぐ か 

指定 する キー ワー ド 

ス 


回 軸 主導 すべ て の 要素 


ペー ジ 幅 等 の 関係 で 英 単 語 が 2 行 に また 初期 値 
が る 場合 に 、 そ の 間 を ハイ フン で 結ぶ こと  ・auto… マ ニュ アル で の 分 割 だ け で な く 、 
が あり ます 。 自動 で 分 割 可能 な 箇所 も 分 割 し ます 
hyphens プロ パテ ィ は 、 英 単語 内 の 改 


行 を ハイ フン で つなぐ が 指定 する ブ プロバ ブラ ウザ 表示 
ティ で す 。 


卓 定 で きる キー ワー ド は 以下 の と お り の 
で す 。 


ク 


: none… 単 語 を ハイ フン で 分 割 し ませ ん 
: manual… 「&shy:」 で 明示 的 に 分 割 可 オヴ シオ サウ めい 
能 と 示さ れ て いる 箇所 の み 分 割 し ます : 


PlesiosaurusMeanSs- 

NearToLizard 

サシ ブル ソ ェ エス 

PlesiosaurusMeans- 

く !DOCTYPE htmt> NearToLizard 

<htmt tang="]a"> 

<head> 攻 下 当 PlesiosaurusMeans- 

く SstyLe> 1 NeerToLzard 


p { width: 299pxj + 
.h1 { hyphens: nonej -moz-hyphens: nonei -epub-hyphens: nonei } 
.h2 { hyphens: auto: -moz-hyphens: autoj -epub-hyphens: autoi } 


EK/styte> 
</head><body> 攻 癌 当 


<p>PtesiosaurusMeans&shy NearToL1zard</p> 

<p clLass="h1>Ptes1osaurusMeans&shy ぅ NearToL1zard</p> 
<p class="h2">PLes1osaurusMeans&shy 3NearToL1zard</p> 
</body> 

</htmt> 
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gle e @ o al 
段落 内 の テキ スト の 表示 位置 (揃え ) を 指定 する 


構 9 
sa て text-aLign: 震 : CSS3 新規 
人 @ … 段落 内 の テキ スト の 表示 位置 を 6 
指定 する キー ワー ド 


店 遇 EEEE ま EE: 竹 すべ で の 要素 


text-align プロ パテ ィ は 、 彼 牙 内 の テキ 
ト の 表示 位置 を 指定 する プロ パテ ィ で す 。 
指定 で きる キー ワー ド は 以下 の と お り 


* end… ボ ックス の 未 尾 に 寄せ ます ( 左 
か ら 右 に 読む 言語 な ら 右 寄せ 、 右 か ら 


左 に 読む 言語 な ら 左寄せ ) 
で す 。 : match-parent… 親 要素 の 値 を 継承 し 
* left… 左 寄せ に し ます ます 。 た だ し 、 親 要素 に 「start」 か 「end] 
*・ right… 右 寄せ に し ます が 指定 され て いる 場合 、 親 の direction 
・ Center… 中 央 揃え に し ます プロ パテ ィ の 値 に よっ て 計算 され 、 計算 
* justify… 両 端 揃 えにし ます 後 の 値 は 「left] か 「right」 に な り ま す 


・ start… ボ ックス の 先頭 に 寄せ ます ( 左 
か ら 右 に 読む 言語 な ら 左寄せ 、 右 か ら な お 、IE と Opera は start、end、match- 


三 : に | 


左 に 読む 言語 な ら 右 寄せ ) : 初期 人 parent に は 対応 し て いま せん 。 


章 逆 M 好 六 司 届 
く <html tang="]a リ > 
<headz 攻 滞 当 
<styte> 
・t1 { text-aLign: right: + 7 ラッ 7 企業 サウ 
・t2 { text-aLign: centeri } 
EE: 衣 /styte> 
く /head> 
< く body> 
く diV> ブラ キオ サウ ルス =brachion ( 腕 ) sauros (トカ ゲ ) 

に UL UL ラ ーー F 

EN マー ーー TH プラ キオ サウ ルス ニーbrachion ( 腕 ) sauros (トカ ゲ ) 
く /d1v> 
</body> 
</htmt> 


の 文字 が 並ぶ 方 向 を 指定 する (P.255) : 197 


- ガ 


C 
S 
加 
ヲ 
ロ 
バ 
ィ 
リ 
補 
ア 
レ 
ジ 
ス 


ロロ 1 の の 0O 


パ 構 

ィ 昌和 

り に | word-spac1ng: 坦 : 

用 ⑯ … 単語 の 間隔 を 指定 する 数 値 か normal 
レ 

ン 

ス 


EEEB2 を 生得 すべ て の 要素 


Word-spacin ほ プロ パテ ィ は 、 単 語 間 
の 幅 を 指定 し ます 。 
初期 値 で ある 「normall を 指定 する と 
通常 の 幅 に な り ま す 。 一 方 、 幅 を 数 字 で 明 
示す る と 、 指 定 し た 幅 に な り ま す 。 

サン プル で は 、 応 た つの 「Parasauro 
lophus means "near crested liZzard".」 


と いう 文章 に 単語 間 の 幅 と し て 、 そ れ ぞ れ ブラ ウザ 表示 

「30px」 「1em] 指定 し て いま す 。 その た 

め 、 ブ ラウ ザ で 表示 する と 、 単 語 と 単語 の 
間 に 通 常 より 広め に スペ ー ス が 表示 され る "ラサ イト ロッ ス 


こと が わか り ま す 。 2 9 
サン プル ソー ス 

<!DOCTYPE htmt> 

<htmt tang="a リ > 

<head> 攻 肖 肖 Parasaurolophus means "near Crested lizard". 

<styLe> Parasaurolopnhus means "near crested lizard". 

-ws1 { word-spac1ng: 30px) } 
.ws2 { word-spacing: 1em: + 

E: 衣 /styte> 

く /head> 

く body> 

<p>Parasaurotophus means &Ldquoinear crested Lizard&rdquoj. く /p> 

<p cuass="ws1">Parasaurotophus means &Ldquosnear crested 1tizard&rdquoj・ く /P> 

<p ctass="ws2">ParasauroLophus means &Ldquoinear crested 1L1zard&rdquoj. く /D> 

</body> 

</htmt> 


Parasaurolopnus means "near crested lizard「". 
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二 電 ii ーー ーー ーー ーー ニニ ーー 2 
1 


eeleleos ぁ 
文字 問 の 幅 を 指定 する 


構 
Letter-spac1ng: 坦 : 


倫 文字 の 間隔 を 指定 する 数 値 か が normal 


ロロ の の の 


に 
ン 


イィ 
リ 
ラフ 
/ 
レ 
ン 
ス 


適用 可能 な 要素 三 :AKd の E: ま 


letter-spacing プ ロ パ ティ は 、 文 字 間 
の 幅 を 指定 し ます 。 

初期 値 で あめ る 「normall を 指定 する と 
通常 の 幅 に な り ま す 。 一 方 、 幅 を 数 字 で 明 
示す る と 、 指 定 し た 幅 に な り ま す 。 
サン プル で は 、 ふ た つ 目 の 「 ス テ ゴ サ ウ 
ルス 屋根 に 覆 わ れ た + ト カゲ | と いう 文 
章 に 文字 間 の 幅 と し て 、「10px」 指定 し 


た まっ 
と 、 ふ た つめ の 文章 の 文字 と 文字 の 間 に 通 

常 よ り 広 ゆめ ゆ に スペ ー ス が 表示 され る こと が 
わか り ま す 。 2 


yp” 人 の 4 
く !DOCTYPE htmt> 
<htmt Lang=! け a リ > 
く <head> 
<meta charset='!utf-8!> ステ ゴ サ ウル スー 屋根 に 覆 わ れ た トカ ゲ 
<titte> 文 字 間 の 幅 </t1tte> 
<styLe> ステ ゴ サ ウル ス = 屋 根 に 覆 わ れ | 
・ts1 { tetter-spac1ngi normati } た + ト カゲ 
・Ls2 { Letter-spacing: 19px: } 
EEL:k/styte> 
< く /head> 
く body> 
<p ctass="ts1"> ス テ ゴ サ ウル ス 王 屋根 に 覆 わ れ た 十 ト カゲ </p> 
<p ctass="Ls2"> ス テ ゴ サ ウル スー 屋根 に 覆 わ れ た 二 ト カゲ </p> 
く </body> 
</htmt> 
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eeewleo#@ 
文章 の 1 行 目 の 字 下 げ を 指定 する 


構 
yl text-jndent: 乾 : 


休 … 文章 の 1 行 目 を 字 下げ する 間隔 の 数 値 


S 
8 
プ 
ロ 
パ 
ィ 
リ 
ラ 
ア 
レ 
ン 
と 


だ 回 肌 2 を 竹 すべ て の 要素 


text-indent プ ロ パ ティ は 、 文 章 の 1 行 ウザ で 表示 する と 、1 行 目 が 5 文字 分 字 下 
目 を 字 下 げす る 幅 を 指定 し ます 。 初期 償 よ げ さ れ て 表示 され る こと が わが り ま す 。 
0 で す 。 

段落 の 区 切り を 示す の に 、 一 般 的 に は 段 
落と 段落 の 間 に 余 白 を 入れ る 方 法 が あり ま 
す が 、text-indent プロ パテ ィ を 利用 し て 
字 下 げ で 段落 の 区 切り を 示す 方 法 も 考え ら 
れる で し よう 。 


サン プル で は 、「 プ ロト ケラ ト プ ス は 科 届 0 誠 用 MM 章介 央 員 間 
「 最 初 十 角 十 顔 」 を 意味 する 合成 語 で す 。] 
と いう 文章 の 1 行 目 の 字 下げ 幅 と し て 、 
[5em] 指定 し て いま す 。 その た め 、 ブ ラ の 


六 六 上 MM 江 久 
く !DOCTYPE htmt> 
<htmt tang="a リ "> 
く <head> 
< く meta charset=Wutf-8 リ "> 
00 プロ ト ケ ラ ト プス は * 提 初 二 角 寸 顔 
:t11 {[ text-1ndent: 5emi + | を 意味 する 合成 語 で す 。 

く /styLe> 
< く /head> 
< く body> 
<p class="ti1"> プ ロト ケラ ト プ ス は 「 最 初 士 角 土 顔 」 <br> 
を 意味 する 合成 語 で す 。</p> 

</body> 

</htmt> 
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5.1 


@eee@O@ 


文字 の 上 下 ・ 中 央 の 線 を 指定 する 


構 
に 4| text-decoration: 電 : 


信 … 文字 に つけ る 線 を 指定 する キー ワー ド 


EE を 皇 得 すべ で の 要素 


2 


パテ ィ は 、 文 字 
パテ ィ で す 。 


text-decoration プ 
の 上 や 下 に 線 を 引く プ 


ぞ れ 「underline」 「overline」 「line- 
through] を 指定 し て いま す 。 その た め 、 


指定 で きる キー ワー 
で す 。 


: none… 線 を 引か な い : 初期 値 

*・ underline… 文 字 の 下 に 線 

*・ overline… 文 字 の 上 に 線 

・ line-through… 文 字 の 上 下 中 央 に 線 


サン プル で は 、3 つ の 「 ア ン キ ロサ ウル 
ス は 「 融 合 し た + ト カゲ ] を 意味 し ます 。」 
と いう 文章 に 線 を 引く 位置 と し て 、 そ れ 


* は 以下 の と お り 


ブラ ウザ で 表示 する と 、 それ ぞ れ の 文章 の 
文字 の 下 、 上 、 上 下 真ん中 の 位置 に 線 が 表 
示さ れる こと が わが かがり ます 。 


ブラ ウザ 表示 


ィ ン WT サウ 7 と ス 


9 


サル ルツ エス 
く !DOCTYPE htmL> 
<htmt tang="]a"> 
<head> 記 凍 当 
く <styLe> 

。td1 { text-decorat1on: undertinei + 
.td2 { text-decoration: overLinei } 
.td3 { text-decorat1on: Line-throughi 
EE 山 : 衣 /styUe> 
</head> 
<body> 馬 店 


く /body> 
く /htmt> 


アン キロ サウ ルス は 「 融 合 し た + ト カゲ 」 を 意味 し ます 。 
アン キロ サウ ルス は 「 藤 合 し た オト カゲ 」 を 意味 し ます 。 
アン キロ サウ ルス は -〔 険 合 し た キト カゲ ュ を 味 し ます 


<p class="td1! ら アン キロ サウ ルス は 「 融 合 し た 上 トカ ゲ ] を 意味 し ます 。</p> 
<p cLass="td2"> ア ン キ ロサ ウル ス は 「 融 合 し た 十 ト カゲ ] を 意味 し ます 。</p> 
<p ctass="td3"> ア ン キ ロサ ウル ス は 「 融 合 し た 十 ト カゲ ] を 意味 し ます 。</P> 


ロロ の の O 


に 
ピン バ 


イ 
リ 
フ 
ブ デ 
レ 
ご 
1 
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ロ NL の O の OO 


^ー 
の 


イ 
リ 
フ 
ア 
レ 
ン 
ス 


に 4.0* 5.1* 


@ sl@ 
傍点 の 形 を 指定 する 


貢 レフ * ペン ダー プレ フィ ックス (-webkit-) が 必要 


構 ② 
> text-emphasis-styte: 名 : CS53 新規 
価 … 傍点 の 種類 を 示す キー ワー ド も し く は 特定 の 文字 
すべ て の 東 
語 で は 、 文 章 中 の 一 部 を 強調 する た 還 
つ 
め に 、 文 字 の 上 や 右 に 傍点 を 打つ こと が あ 二 
り ま す 。 _ ・ open… 塗 りつ ぶさ な い 
text-emphasis-style プ ロ パ ティ で 、 
傍点 の 種類 を 指定 し ます 。 [形状 
傍点 の 種類 は 「 塗 りつ ぶし 」 と 「 形 状 ] 。 dot… 点 
を それ ぞ れ 指定 で きま す 。 こ れ ら の 値 は 、 ci. 
ひと つ ず つ ス ペー ス で 区 切っ て 指定 し ます 。 和 double-circle… 二 重 円 
指定 で きる キー ワー ド は 以下 の と お り iangle.. 三 角 
で す 。 ・ sesame… ゴ マ 
( 稚 点 を つけ な い ) また 、 テ キス ト を 紅 待 で 囲っ て 特定 の 
* none… 傍 点 を つけ な い : 初期 値 文字 を 指定 する こと も で きま す 。 


MM2 履 MM 


<!DOCTYPE htmt> 
<htmt tang="]a"> 
<head> 病 当 
く styLe> 
・tes1  { text-emphas1s-styte: fiLted 
sesamej -webk] モ -text-emphas1s-sty Le: 
fiLted sesamei } 
.tes2 { text-emphasis-styLe: 「 支 3 
ー-webk] モ ーtex て -emphas1s-styte: ! 交 !3 } 
EE:/styte> 
く /head> 
<body> 江 時 当 
<p> ア ロサ ウル スー<span ctass="tes1"> 異 な っ た 
十 ト カゲ </span></p> 
<p> ア ロサ ウル ス 三 <span ctass="tes2"> 異 な っ た 
十 ト カゲ </span></p> 
</body> 
</htmt> 
い / 


ブラ ウザ 表示 


ささ ささ ささ ささ 


アロ サウ ルス = 異な っ た キト カゲ 


アロ サウ ルス = 異な っ た + ト カゲ 
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キ 4.0* | 5.1* 


」@lal@ 
傍点 の 色 を 指定 する 


ひ 「 』 レコ ネ ペン ダー プレ フィ ックス (-webkit-) が 必要 


構 
4| text-emphas1s-coLor: 坦 : 


信 傍点 の 色 指 定 


上 回 出 が ま 得 すべ て の 要素 


CSS3 新規 


パテ ィ で は 、 


text-emphasis-color プ 
傍点 の 色 を 指定 し ます 。 

text-emphasis-color プ ロ パ ティ だ 
け で は 傍点 は 表示 され な いた め 、text- 
emphasis-style を 一 緒 に 指定 する 必要 が 
あり ます 。 
も し く は 、text-emphasis プロ パテ ィ 
で 傍点 の 種類 と 色 を 一 括 し て 指定 する 必要 
が あり ます 。 

初期 値 は CurrentColor で す 。 


ブラ ウザ 表示 


<!DOCTYPE html> 

<htmt tang="a"> 
<head> 

< く meta charset= リ "utf-8 リ > 
<titte> 傍 点 の 色 </tttLe> 
く styLe> 


く /styte> 
く /head> 
く body> 


</body> 
</htmL> 


.tec1  { text-emphasis-styLe: open sesamej -webk]t-text-emphas1s-styLe: open 
sesamej て text-emphasis-coLor: redi -webk1 モ -text-emphas1s-coLor: Fedi + 


<p> マ ン モ ス は ゾウ の 類縁 で す が 、<span cUass="tec1"> 直 接 の 祖先 で は あり ませ ん </span>。</pP> 


せん 。 
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5 
8 
8 
プ 
ロ 
パ 
2 
リ 
選 
ア 
レ 
ツ 
レ 4 


キ 


1 ュ *+ を 。 40* を 5n 
人 @ 導 W ひ L 』 の * ペン ダー プレ フィ ックス (-webkit-) が 必要 


傍点 の 形 と 色 を 一 括 指 定 する 


構 
=| text-emphas1s: 坦 : CS53 新規 


介 … 傍点 の 種類 と 色 指定 


ロロ NL の 0O の O 


に 
の | 


- 


の 
リ 
フ 
ア 
レ 
ン 
ス 


に EEB2 ま も: 得 すべ て の 要素 


種類 と 色 を 一 括 し て 指定 する プロ パテ ィ 
具体 的 に は 、 傍 点 の 種類 を text- 
パテ ィ の 値 、 傍 点 の 
値 で 指定 し ます 。 0 
諾 家 の 名 前 は 甲 経 の 中 央 に 中 英 、 左 右 に 側 葉 の 三 つ 
<htmt tang="]a"> 
< く styte> 
EE 山 玉 </styLe> 
199m 走 で <span ctass="te1"> 三 勝 中 </span>。</p> 


text-emphasis プロ パテ ィ は 、 傍 点 の 
窓 あ 。 
三 
emphasis-style プ 
色 を text-emphasis-Color プロ パテ ィ の 
?⑳89 
を 
三 里 中 
い 7 
サン プル ソー エス の 泉 が ある こと が 由来 。 ち な み に 彼 は 100m 走 で 三 勝 
<!DOCTYPE htmt> 中 
<head> 
・te1  { text-emphasis: fiLLed triangte red: -webk1 モ -text-emphasis: fiLLed 
triangLe redi } 
</head> 
<body> 
<p><span ctass="te1"> 三 葉虫 </span> の 名 前 は 甲羅 の 中 央 に <span ctass="te1"> 中 葉 </ 
span>、 左 右 に <span ctass="te1"> 側 葉 </span> の 三 つ の 葉 が ある こと が 由来 。 ち な み に 彼 は 
</body> 
く /htmt> 


: 関連 
204 : で ) 人 款 の 形 を 指定 する (P.202) 傍点 の 色 を 指定 する (P.203) 


> 5 ーー 


8eweoWe 。 
文字 に 影 を 表示 する 


構 ② 
| text-shadow: 坦 人 4 圏 大 : CSS3 新規 
@ 水平 方 向 の 長 さ 
人 … 垂直 方 向 の 長 さ 
ぼかし の 長 さ 
b。 人 0 


適用 可能 な 要素 陳 Ad の E: ま き 


text-shadow プロ パテ ィ は 、 文 字 に 影 
を つけ る 際 に 使い ます 。 
影 は 、 ふた つま た は 3 つの 数 値 と 、 色 を 
表す 値 を 組み 合わ せ て 指定 し ます 。 最初 の 
点 た つの 数 値 は 、 文 字 と 影 の 離れ 具合 を 表 


す 。 
な お 、 影 を 表す 文字 列 を コン マ で 区 切っ 
て 、 複 数 の 影 を つけ る こと も で きま す 。 


剛 M 以 小 M 共 
<!DOCTYPE htmt> 始祖 鳥 (アー ケ オ プ テ リ クス ) = 古代 の 二 羽 毛 
<htmt tang="]a"> as 
<head> 地島 (ター クラ テリ クス 吉 代 の + 天 
<meta charset="utf-8> 


<titte> 文 字 に 影 を 表示 する </t]tte> 
<styte> 


し ます 。 また 、3 つ 目 の 数 値 は 、 影 を ば か 
す 際 の 幅 を 指定 し ます 。 初期 値 は none で 


・ts1 { text-shadow: の 5px 9 #ccccccj 

・ts2 { text-shadow: 3px 5pX 2pX #879999。 7px 19px 5px #ffa399: } 
E 記 : 衣 /styUe> 

く /head> 

<body>E 凍 当 

<p class="ts1> 始 祖 鳥 ( ア ー ケ オプ テリ クス ) 三 古代 の 十 羽毛 </p> 

<p class="ts2"> 始 祖 鳥 ( ア ー ケ オプ テリ クス ) 三 古代 の 填 洞 毛 </p> 

</body> 

く /htmt> 


関連 ー 
@② の 長 さ (P.164) 、 カ ラー の 値 (P.165) 
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C 
S 
8 
プ 
品 
バ 
ィ 
リ 
ラ 
ア 
レ 
= 
ス え 


6 ら @@@ 


yml en oe 


1 
% 
S 
| 看 「 
| 模 ・ 
押 
本 
qH 
の 


に 
の 


pl background-cotor: 坦 : 
、 介 … 背景 色 の 色 指 定 も し く は transparent 


の 
リ 
フ 
ア 
レ 
ン 
ス 


負 人 用 可能 な 層 素 文 :MAKG の E ま 3 


background-color プロ パテ ィ は 、 要 
素 の 背景 色 を 指定 する プロ パテ ィ で す 。 

初期 値 は 、 背 景 を 透過 する 指定 で ある 
transparent で す 。 

サン プル で は 、body 要 素 の 背景 色 に 
「yellowgreen] を 指定 し て いま す 。 その 
た め 、 ブ ラウ ザ で 表示 する と 、 画 面 全体 の 
背景 色 が 黄 緑 色 に 表示 され る こと が わか り 
ます 。 


| サン ブル ソー ス |」 ブラ ウザ 表示 
<!DOCTYPE html> 
<htmt tang=!a"> 
<head> 上 邊 の ゅ っ ま 
<meta charset=!utf-8"> NL さら ルト さ 
<titte> 背 景 の 色 く </t1tLe> 

<styLe> 

body {background-cotor: yeLtowgreeni} 
</styte> 

</head> 

<body> 

<p>background-cotor プ ロ パ ティ は 、 要 素 の 
背景 色 を 指定 する プロ パテ ィ で す 。</p> 
</body> 

</htmt> 


も 
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2eweo$ る 9 
背景 画像 を 指定 する 


構 
sl background-1mage: 坦 : 


借 … 背景 画像 の URL も し く は none 


適用 可能 な 要素 陳 :AYet ひ E そ 


CSS3 更新 


background-image プロ パテ ィ は 、 要 
素 の 背景 画像 を 指定 する プロ パテ ィ で す 。 


数 指定 し た と き の 重 な り 順 は 、 最 初 に 指定 
し た 画像 が 一 番 上 、 最 後に 指定 し た 画像 が 


背景 画像 を 指定 する と き は 、 値 に url( 背 景 

画像 の URL) を 指定 し 、 背 景 画像 を 指定 し 

な いと き は 、none を 指定 し ます 。 
初期 値 は none で す 。 

IE8 ま で は 、 ひ と つの background- 
image プロ パテ ィ に ひと つの 画像 の み 指 
定 が で きま す 。 

一 方 、IE9 以 上 と 他 の ブラ ウザ で は 、 背 
景 画像 を コン マ で 区 切っ て 複数 指定 し 、 重 
ね 合わ せ する こと が で きま す 。 背景 画像 を 複 


一 和 益 下 に な り ま す 。 

な お 、background-color と background- 
image の 両方 が 指定 され て いる 場合 、 back 
ground-Color で 指定 し た 色 が 下 に な り 、 
その 上 に background-image で 指定 し 
た 画像 が 重ね られ ます 。 


<!DOCTYPE htmt> 


<htmt tang="]a"> 

く head> 

<meta charset=Wutf-8 リ > 
<titte> 背 景 画像 </t1tLe> 

<styte> 

div { background-1mage: urt(bg_S1792.png): } 
Ei: 衣 /styUe> 

</head> 

く <body> 

<div><1mg src=!S1792.png' alLt=!"W> く /d1V> 
<p> 背 景 用 の 画像 <img src="bg_S1792.png"></p> 
</body> 

</htmt> 
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背景 用 の 画像 『“ 
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: 品 1 の の O 


に 
そ 


補 
リ 
フ 
アデ 
レ 
ン 
ス 


@@e@e@O@ 


C 

に 1 る 

s 背景 画像 の くり 返し 方 を 指定 する 

パ 構 旨 | 
ィ 了 。 人 | 

Mi sl background-repeat: 坦 : CSS3 更新 

便 … 背景 画像 の 繰り 返し 方 を 指定 する 1 

M キー ワー ド 

ス 


適用 可能 な 要素 前 AKG の EE 


background-repeat プ ロ パ ティ は 、 IE8 ま で は 、 ひ と つの background- 
背景 画像 の 繰り 返し 方 を 指定 する プロ パ repeat プ ロ パ ティ に ひと つの 繰り 返し 表 
ティ で す 。 示 を 指定 で きま す 。 

指定 で きる キー ワー ド は 以下 の と お り 一 方 、IE9 以 上 と 他 の ブラ ウザ で は 、 コ 
で す 。 ンマ で 区 切っ て 複数 の 繰り 返し 表示 を 指定 


し 、 重 ね 合わ せる こと が で きま す 。 
・ repeat… 縦 方 向 / 横 方 向 と も に 繰り 返 


す : 初期 値 
・ repeat-x… 横 方 向 の み 繰り 返す 
*・ repeat-y… 縦 方 向 の み 繰り 返す 
*・ no-repeat… 繰 り 返 さ な い 


Cf な いま 


<!DOCTYPE htmt> 


<htmt tang="]a リ > 
<head> 

<meta charset=utf-8 リ > 
<titte> 背 景 画 像 の くり 返し 方 </t1tte> 、 
<styLe> 

div { background-1mage: urt(bg_S1793.png) : background-repeat: repeat-X} 
</ styte> 

</head> 

< く body> 

<div><1mg src="S1793.png" alt= り > く /d1V> 

<p> こ の 画像 を 背景 に し ます 。<1mg src="bg_S1793.png"></p> 

</body> 

</htmt> 
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レジ 電導 ( ま 


@eeweo 


スク ロー ル 時 の 背景 画像 を 固定 表示 する 


構 


| background-attachment: : 
借 … スク ロー ル 時 の 背景 画像 の 表示 を 


指定 する キー ワー ド 


適用 可能 な 要素 凍 :AYe の EE 


CSS3 更新 


2 


background-attachrment プロ パテ ィ 
は 、 育 景 画像 を ペー ジ と と も に スク ロー ル 
させ る か が どう か を 指定 する プロ パテ ィ で 
す 。 指定 で きる キー ワー ド は 以下 の と お り 
で す 。 


* fixed… ペ ー ジ の 表示 領域 に 対し て 、 背 
景 画像 を 固定 し ます 

* SCrollL… 要 素 に 対し て 、 背 景 画像 を 固定 
し ます (要素 の 中 身 が スク ロー ル し て も 、 
背景 画像 は スク ロー ル し ませ ん ) : 初 期 値 

*・ local… 要 素 の 中 身 と と も に 背景 画像 が 
スク ロー ル し ます 


な お 、 IEZ、 IE8、 Firefox は local に 対応 
し て いま せ A ん 。 Android と iOS で は fixed 
に 対応 し て いま せん 。 IE9、 IE10、 Opera 
は textarea 要 素 で は local の 指定 が 効き 
ませ ん (Scroll と 同じ 動作 に な り ま す )。 

また 、IE8 ま で は 、 ひ と つの background- 
attachment プ ロ パ ティ に ひと つの 固 
表示 指定 が で きま す 。 一 方 、IE9 以 上 と 他 
の ブラ ウザ で は 、 コ ンマ で 区 切っ て 複数 の 
固定 表示 を 指定 し 、 重 ね 合わ せる こと が で 
きま す 。 


[スクロール 時 の 背 影 画集 を x 


htmlscss3.codingdesignjp/c.… 


7 ル Mm 入 
く IDOCTYPE htmt> 
<htmt tang=!a"> 
<head> 
<meta charset="utf-8 リ > 
<titte> ス クロ ー ル 時 の 背景 画像 の 固定 表示 </tttLe> 
く styte> 
body { background-attachment: fixedi 
background-image: urt(bg_S1794.png): 
background-repeat: repeat-x: background- 
cotor: darkseagreeni + 
EE 前:/styte> 
</head> 
<body>E 計 当 
<p>background-attachment プ ロ パ ティ で 背景 を 
定 表 示さ せ て いま す 。</p> 
</body> 
</htmt> 


Me 


そ に な に いう た な 
て りな 
訪 吐 いか? 


SSSS3 こ ossEa=s ま に コ 


5363SSEEaosSsSsesGGSSSSs 


スク ロー ル 時 の 公太 画像 を Fx 
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ロロ NL の の OO 


に 
の | 


許 
リ 
ア 
ア 
レ 
= ん 
ス 


ロロ の の 0O 


ヽ ーー 
ーー の! 


守 
リ 
フ 
ア 
レ 
ン 
ス 


@eel@o@ ぁ 
背景 画像 の 縦 ・ 横 位置 


を 指定 する 


| background-positon: 起 全 : 


bo 


数 値 も し く は キー ワー ド 
すべ om 


景 画像 の 横 の 表示 位置 を 指定 する 数 値 も し く は キー ワー ド 
人 背景 画像 の 縦 の 表示 位置 を 指定 する 紀 


CSS3 更新 


background-position プ ロ パ ティ は 、 
背景 が 表示 され る 部 分 の 中 で の 横 方 向 / 縦 
方 向 の 位置 を 指定 する プロ パテ ィ で す 。 指 


定 方 法 は 以下 の よう に な り ま す 。 


(1) キ ー ワ ー ド で 指定 

横 方 向 は left ノ center/right の い ず 
れ か 、 縦 方 向 は top/center/bottom 
の いずれ か か ら 選 び 、 ス ペー ス で 区 切っ て 
指定 し ます 。 


(2) 長 さ で 指定 

px 等 の 長 さ の 単位 で 横 方 向 / 縦 方 向 の 
位置 を 指定 で きま す 。 
背景 が 表示 され る 部 分 の 左上 が 横 プ 縦 と 


も に 0 に な り ま す 。 プ ラス の 値 を 指定 する 
と 、 横 方 向 は 右 一 、 縦 方 向 は 下 ! に 移動 し 
ます 。 


(3) パー セン ト で 指定 

パー セン ト で 指定 し た 場合 、096 が left 
ン top、509% が center、1009% が right 
/bottom と 同じ 位置 に な かり ま す 。 


な お 、IE8 ま で は 、 ひ と つの back 
ground-position プ ロ パ ティ に ひと つの 
表示 位置 指定 が で きま す 。 一 方 、IE9 以 上 
と 他 の ブラ ウザ で は 、 コ ンマ で 区 切 つて 複 
数 の 表示 位置 を 指定 で きま す 。 


サシ プル ソー スズ 
<!DOCTYPE htmL> 
<htmt Lang="]a"> 
<head> 
<meta charset=Wutf-8 リ > 
<titte> 背 景 画像 の 縦 ・ 横 位置 </t1tte> 
<styte> 
div { background-position: right top 
background-repeat: repeat-y: background- 
cotLor: oLivedrab: background-1mage: 
urt(bg_S1705.png)} + 
</styLe> 
</head> 
< く body> 
<div><1mg src="S1795.png" al て ="> く /d1V> 
<p> 背 景 用 の 画像 <1mg src="bg_S1795.png"></p> 
</body> 
く /htmt> 


ロ の 中 に 
$ 向 維 き 
0 入 い すい まで に 


末 用 の 画像 
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人 き ま 2.x は ベン ダー プレ フィ ックス (-webkit-) が 必要 


背景 画像 が 表示 され る エリ ア を 指定 する 


構 の 
ebackground-ctip: 直 : CSS3 新規 
【 ) 1 


・ 背景 の 表示 エリ ア を 指定 する キー ワー ド 


適用 可能 な 要素 衣 :Yq の 3 


Dackground-clip プ ロ パ ティ は 、 背 景 
を ボッ クス の どの 部 分 に 描画 する か を 指定 
する プロ パテ ィ で す 。 

指定 で きる キー ワー ド は 以下 の と お り 
で @。 

> borderbox・ ポ ボーダー ポ ックス (ボー 

ダー と その 内 側 ) : 初期 値 
* padding-box… パ ディ ング ボッ クス 

(コン テン ツ 領 域 と バディ ング 領域 ) 

・ content-box… コ ン テ ン ツ 仁 域 

コン マ で 区 切っ て 複数 の キー ワー ド を 指 

定 す る こと も で きま す 。 


2 の AX 


< く !DOCTYPE htmt> 

<htmt tang="a"><head> 諾 寺 当 <styLe> 
・O { marg1n: 19px 9: background-cotor: pLum: border: 5px dotted gray) padd1ng: 
19pxj coLor: whitei } 

1 { border: 2px sotid yeutow: + 

・bc-b { background-cLjp:border-box: } 

・bc-p { background-cLip:padding-boxi } 

・bc-c { background-ctip:content-boxi + 

< く /styte> 

</head><body> 区 半 当 

<div ctass="o bc-b"><div ctass="T">Content box</div></d1v> 

<div ctass="o bc-p"><div ctass="1">conten モ box</d1v></div> 

<div ctass=Wo bc-c"><div ctass="1">content box</div></div> 

人 HH 


1 
@ ら スタ イル を 適用 する 「 ボ ックス ] の し くみ (P.163) : 211 


ロロ NL の の OO 


に 
の | 


イ 
リ 
と 。 
ア 
レ 
ス 


ロロ NL の の O 


ペー 
と 


次 
リ 
2 
ア 
レ 
ジ 
ス 


構 
= background-orgin: 但 : 


@ 背景 画像 が 表示 され る 基準 位置 を 指定 する キー ワー ド 


EE も 得 すべ て の 要素 


CSS3 新規 


background-Origin プロ パテ ィ は 、 痛 
景 を 描画 し 始め る 基準 点 を 、 ボ ックス の 
どこ に 合わ せる か を 指定 する プロ パテ ィ 
で す 。 

指定 で きる キー ワー ド は 以下 の と お り 
で す 。 


s border-box… ボ ー ダ ー ボ ックス (ボー 
ダー と その 内 側 ) 

・ padding-box… パ ディ ング ボッ クス ( コ 
ン テ ン ツ 和 領域 と パ デ ィ ン グ 伝 域 ) : 初 期 値 

。 content-box… コ ン テ ン ツ 領 域 


background-origin プロ パテ ィ に 指定 
し た 範囲 の 中 で 、background-position 
プロ パテ ィ に 指定 し た 位置 を 基準 と し て 、 
背景 が 描画 され ます 。 た だ し 、 対 象 要素 の 
background-attachment プ ロ パ ティ の 
値 が fixed の 場合 、background-Origin 
プロ パテ ィ の 設定 は 無効 で す 。 


ブラ ウザ 表示 


まな か ゃ り 可 叶 の 


る 追い に され 3 
の 
7 


い 


72 
<!DOCTYPE htmL> 
<htmt tang="ja"><head> 攻 半 注 <styUe> 
.o { margin: 19px の: background-1mage: 
urt(bg_S1707.png)) background-coLor: 
yeLtowgreenj border: 5px dotted gray3 
padding: 19pxj coLor: orangeredi } 

.1 { border: 2px soltid yeLtowi + 

.bo-b {background-ortgin:border-box:+ 
.bo-p {background-origin:padding-boxj} 
.bo-c {background-or1gin:content-box: 
</styte></head><body> 葉 問 当 


</body> 
</htmL> 


<div ctass="o bo-b"><div cLass="1">content box</d1v> く /d1V> 
<div ctass="o bo-p"><div cLass="1">content box</dTv></d1V> 
<div ctass="o bo-c"><div ctass="1">content box</d1V></d1V> 


: 関連 
212 : お ) スタ イル を 適用 する 「 ボ ックス | の し くみ (P.163) 


2.2* 


@e@lwe@lol 


5.1 


貞 レ \ 2.x ま で は ベン ダー プレ フィ ックス (-webkit-) が 必要 


本 旧 計 es 
育 景 画像 の 表示 サイ ズ を 指定 する 

構 Q ] 
background-size: 電 : 

人 背景 画像 の 表示 サイ ズ を 指定 する 数 値 
も し く は キー ワー ド 
半 用 可能 な 要 朱 度 みく の :- と 3 
ソ 
Dackground-size プロ パテ ィ は 、 背 景 背景 所 画 範 囲 の サイ ズ に 対す る 割合 を 指 


画像 の 拡大 縮小 方 法 を 指定 する プ 
ティ で す 。 

指定 で きる キー ワー ド 及 び 数 値 は 以下 の 
と お り で す 。 


*・ Contain… 画 像 の 縦横 比 を 保っ た まま 、 
背景 の 表示 エリ ア に 合う 最小 サイ ズ に 
背景 画像 が 拡大 縮小 され ます 

* Cover… 画 像 の 縦横 比 を 保っ た まま 、 背 
景 の 表示 エリ ア 全 体 を 覆い 尽く す サ イ 
ズ に 背景 画像 が 拡大 縮小 べ れ ます 


パ 


定 す る こと に な り ま す 
・ auto… 背 景 画像 の 表示 サイ ズ は 変更 し 
ませ ん : 初期 値 


長 さ アパ ー セ ント は 、 順 に 幅 と 高 さ の 上 


> で NN に ヘリ ニニ ロ NL の の O 


た つの 値 を 指定 する こと が で きま す 。 値 を 
ひと つ だ け 指 定 し た 場合 は 、 高 さ を 「auto] 
に し た の と 同じ 扱い に な り ま す 。 

な お 、 痛 景 画像 を 複数 指定 し て いる 場合 
よ 、 そ れ ぞ れ の 画像 に 対す る 値 を コン マ で 


・ 長 さ ン パー セン ト … 指 定 し た サイ ズ に ま 区切 つて 指定 する こと も で まま す 。 
で 拡大 / 縮 小さ れ ま す 。 パー セン ト は 、 
) 
NNOCNNHE NOW WI 拉 ETUUUI 
<htmt tang=" け a"> 
<head> 症 肖 中 が っ < の は 
<Styte> 新 幸 a 証 挽 


div { width: 159pxj height: 30pxs 
background-1mage: urt(S1798.png): padding: 
19pxj float: tefti } 

・bs-contain {background-s1ze:contains+ 
・bs-cover { background-s1ze: coveri } 
・bs1 { background-size: 19% autoi + 
馬 店 人 /styte> 

</head> 

<body>EE 癌 当 

<div ctass="bs-conta]n"> く </d1V> 

< く div ctass="bs-cover"></d1v> 

<div ctass="bs1"> く </d1V> 

</body> 

</htmt> 
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背景 画像 スタ イル を 一 括 指定 する 


| background: 坦 : 
に <| @ ・ 痛 景 関係 の プロ パテ ィ の 指定 


CSS3 更新 


EE た ま エ < 得 すべ て の 要素 


background プ ロ パ ティ は 、 背 景 関係 
の プロ パテ ィ を まとめ て 指定 する プロ パ (3) 背 景 画像 を 複数 指定 
ティ で す 。 基本 的 に は 、 プ ロ パ ティ の 値 を 各 プ ロ パ ティ の 値 を 列 学 し た 部 分 を 、 コ ン 
指定 する 順序 は 問い ませ ん 。 た だ し 、 以下 マ で 区 切っ て 複数 回 指定 し ます 。 


の 決ま り が あり ます 。 (4) 背景 画像 を 複数 指定 背景 色 の 指定 
background-color プ ロ パ ティ の 値 を 、 

(1)background-size プロ パテ ィ 最後 の 背景 画像 の 指定 箇所 に 書 さ ます 。 

background-position プ ロ パ ティ の 後に (5) プロ パテ ィ の 値 を 指定 し な か っ た 場合 

「/」 で 区 切っ て 指定 し ます 。 は 、 初 期 値 を 指定 し た こと に な り ま す 。 

(2)background-origin プロ パテ ィ と 

background-clip プロ パテ ィ IE8 ま で と Safari、Android、iOS は 、 


値 を 1 回 だ け 指定 し た 場合 は 、 ふ た つの background-clip/background-origin 
プロ パテ ィ に 同じ 値 を 指定 し た こと に な background-size プロ パテ ィ を 含め た 
り ま す 。 一 方 、 ス ペー ス で 区 切っ て ふた 一 括 指定 は で きま せん 。 

つの 値 を 指定 し た 場合 、 ひ と つづ 目 の 値 が また Firefox は background-size プロ 
background-origin プロ パテ ィ に 、 尺 た パティ の 指定 と 、background-origin/ 
つ 目 の 値 が background-clip プ ロ パ ティ background-clip プロ パテ ィ を 別々 に 指 
こ 適用 され ます 。 定 する 書き 方 に は 未 対応 で す 。 


bp の PP 1 チア ay 4cm ア 
<!DOCTYPE html> 
<htmt tang="]a"> 
<head> 攻 問 肖 
く <styLe> 
span { color: yeLLowi border: 2px solid yeLtows 
disptay: btLocki + 
div { padding: 25pxj border: 5px dotted gray 
background: urt(bg_S1709.png) Left top / 19% auto 
repeat border-box padding-box skybtLuei } 
</styte> 
</head> 
<body> 
<div><span><1mg Src="S1799.png'"' alt=""> く /span> く /d1v> 
</body> 
</htmt> 
臣 


背景 色 (P.206) 、 背 景 画像 (P.207) 、 背 景 画像 の 繰り 返し 方 (P.208) 、 背 景 画像 の 固定 表示 (P.209) 、 


214 9 背景 画像 の 表示 位置 (P.210)、 背景 画像 が 表示 され る エリ ア (P.21 1) 、 背景 画像 が 表示 され る 基準 位置 


(P.212)、 背 景 画 像 の 表示 サイ ズ (P.213) 


mo 


先行 実装 され て いる プロ バ パティ を 利用 する 


語 | -o- 信 : 

kyl -ms- 夫 : 会: 
-moz- 坦 : 会 : 代 … 正式 な プロ パテ ィ 名 
-webk]t-: 全 : 人 … プロ パテ ィ の 値 


四 先 行 実 装 と は 
ブラ ウザ を 制作 し て いる 会 社 は 、W3C か ら CSS の 各 プ ロ パ ティ の 仕様 が 正式 勧告 さ 
れる 前 に 実装 を 進め て いま す 。 この こと を 先行 実装 と 言い ます 。 先行 実装 し て いる プロパ 
PS ウザ ご と に 異な り ます 。 は NGRRHRG1 昌 人 
行 実 装 を し て いる プロ パテ ィ は 頭 に ブラ ウザ 5- Cpea の バー ジョ ン 128 
AU と の 近 本 時 を パル ダー ーー TUSWWet MGS6M 生 
プレ フィ ックス と 言い ます 。 ECSrRISS 


SOS 加 和 N 3 . Google Chrome, Safari, 
| プレ フィ ックス に は 右記 の も の が あり ・-vebktt- GOO 際 


時 ベン ダー プレ フィ ックス な し の プロ パテ ィ も 併記 する 

W3C か ら プ ロ パ ティ が 正式 に 勧告 され る と 、 ベンダー プレ フィ ックス が な く て も プ 
パテ ィ が 利用 で きる よう に 実装 され る こと に な り ま す 。 

その 際 に 、 ベン ダー プレ フィ ックス の つい て いる プロ パテ ィ で は 、 ブ ラウ ザ は 動作 し な 
く な る こと が あり ます 。 勧告 され た あと も 、 表 示 を 正常 に 保つ た め に は 、 ベンダー プレ 
フィ ックス な し の プロ パテ ィ を 人 記 し て お く 必 要 が あり ます 。 


邊 先行 実装 の 状況 を 確認 する 

「Can | use.…| と いう Web サ イト で は 、 EDNMN CSS3、」avaScript 
API を サポ ー ト し で いる が どう 主題 識 閥 8 

か が を 確認 する こと が で きま す 。 

例 え ば 、 CS53 に animation 

プロ パ デ ィ が どの くら い サ ポー 

トド され て いる か を 確認 する と 、 

Internet Explorer と Firefox 

以外 で は ベン ダー プレ フィ ッ ク 

ス が 必要 な こと が わか り ま す 。 


CSS3 Animation - Can 1 use.… http://caniuse.com/#feat=css-animation 


4.0*3 51*2 1 filter プ ロ パ ティ を 利用 


8 を @ ⑨ O F] し トレン ジン スン の リー 


9 
S に に 4 等 し ーー 
s 直線 的 な グラ デー ショ ン を 表示 する 
只 EN 
な background-1mage: Linear-gradient( 電 、 全 、 圏 …: 
り 匠 border-image: Linear-gradient( 氏 。 人, 圏 …)) 
ラ tist-styLe-1mage: Linear-gradient( 夫 , 合 。 圏 ): 
レ な ど 
ス 価 … グラデーション の 角度 も し く は 方 向 を 示す キー ワー ド 
全 … グラ デー ショ ン を 開始 する 色 (と 幅 ) の 
圏 … グラ デー ショ ン を 終了 する 色 (と 幅 ) 
イメ ー ジ な を 指定 で きる プロ バテ ィ 


CSS レベ ル 3 で は 、 画像 を 指定 で きる プ 方 向 を 省略 し た 場合 、 上 か ら 下 の グ 
ロ パ ティ (background-image な ど ) の ラ デ ー シ ョ ン に な り ま す 。 こ の 指定 は 
値 と し て 、 グ ラ デ ー シ ョ ン を 指定 する こと WebKit 系 (Safari6.x ま で 、Android4.x、 
が で きま す 。 直線 的 な グラ デー ショ ン を 指 IOS6.x ま で ) で は 利用 で きま せん 。 
定 す る に は 、「linear-gradient] と いう 
関数 を 使い ます 。 


9deg 

邊 本 書 執筆 時 点 で の 仕様 ーー 

lnear-gradient 関 数 は 、 通 常 は うつ の 279deg 99deg 
値 が 必要 に な り ま す 。 グ ラ デ ー シ ョ ン の 方 
向 、 開 始 色 、 終 了 色 で す 。 それ ぞ れ の 値 は 225deg 135deg 

ンマ で 区 切り ます 。 回 半 

ひと 二 目 の 値 、 グ ラ デ ー シ ョ ン の 方 向 は 角度 で 指定 する 場合 
角度 が キー ワー ド で 指定 し ます 。 to Left top to top to rjght top 


角度 で 指定 する 場合 、 単 位 は 「deg」 で す 。 
「0degl (0 度 ) が 下 か ら 上 の グラ デー ショ 記 
to Lef モ 


ン を 表し 、 プ ラス の 角度 を 指定 する と 、 そ 0 
れ に 応じ て 時 計 回 り で 方 向 が 決ま り ます 。 


ロ 


一 方 、 キーワ ー ド で 指定 する 場合 は 、 to teft bottom 05 to rght bottom 
[to」 と [top」 「bottom」 Iright」 「left」 
を 半角 スペ ー ス で 区 切っ て 組み 合わ せ た も 人 
の に な り ま す 。 点 た つ 目 以降 の 値 で 、 グ ラ デ ー シ ョ ン 
[to top] で あれ ば 下 か ら 上 へ の グラ デー の 開始 色 と 終 了 色 を 指定 し ます 。 例 えば 


ショ ン 、[「to right top] で あれ ば 右上 へ [linear-gradient(Odeg, white, black)] 
の グラ デー ショ ン に な り ま す 。 と する と 、 下 が 白 、 上 が 黒 の グラ デー ショ 
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ン に な り ま す 。 

また 、 さら に 色 を 追加 指定 し て 「linear- 
gradient(0deg. white. green, black)」 
と する と 、 下 が 白 、 中 央 が 緑 、 上 が 黒 の グ 
ラ デ ー シ ョ ン に な り ま す 。 

色 と と も に 幅 も 指定 する と 、 そ の 幅 だ け 
グラ デー ショ ン し ます 。 幅 は 色 の 指定 に 半 
角 ス ペー ス で 区 切っ て px 等 の 単位 で 指定 
する か 、 パ ー セ ント で 指定 し ます 。 例え ば 、 
[tnear-gradient(99deg, red 9 の %。 
green 25%。 btue 199%)] と する と 、 
左端 が 赤 、 左 端 か ら 右 に 向かっ て 2596 の 
位置 が 緑 、 右 端 が 青 で 、 そ の 間 が グラ デー 
ショ ン し ます 。 


置 WebKit で の 書き 方 

本 書 執筆 時 点 で は 、VWebKit 系 (Safari6. 
x ま で 、 Android4.x、 IOS6.x ま で ) で は 、 
それ ぞ れ 「-webkit-linear-gradient」 と 
いつ ペン ダー プレ フィ ッ ク ズ で グラ デー 
ショ ン を サポ ー ト し て いま す 。 


CSS レベ ル 3 の 仕様 と ほぼ ぼ 同様 で す が 、 


ひと つつ 目 の パ ラメ ー タ は グラ デー ショ ン の 


方 向 で は な く 、 始 点 を 表し ます 。 角度 で 指 
定 する 場合 、0deg に する と 左 か ら 右 へ の 
グラ デー ショ ン に な り 、 プ ラス の 角度 を 指 
定 す る と 、 そ れ に 応じ て 半 時 計 和 回 り で 方 向 
が 決ま り ま す 。 また 、「leftl 「rightl 「top」 
「bottom」 を 指定 する と 、 それ ぞ れ 左右 
上 ント 下 か ら グ ラ デ ー シ ョ ン が 始ま り ま す 。 


(e 
S 
S 
プ 
ロ 
バ 
女 
リ 
ラ 
ア 
レ 
3 
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中 Internet Explorer 9 以下 

で の 書き 方 

Internet Explore 9 以下 は 、linear- 
gradient プ ロ パ ティ に は 対応 し て いま せ 
ん 。 し か し 、filter プロ パテ ィ を 以下 の よ 
うに 書く こと で 、 縦 また は 横 の グラ デー 
ショ ン を 行う こと が で きま す 。 「 方 向 」 
に は 、 縦 方 向 な ら 「0」、 横 方 向 な ら 「1」 
を 指定 し ます 。 


fitLter: prog1d:DXTmageTransform. 
Microsoft.Grad1ent(Grad1entType= 
方 和 名, StartCotorStr=! 開始 色 '。 
EndCotorStr=' 終了 色 ) 


(2272 
<!DOCTYPE html> 
<htmt tang="]a リ > 
<head> 癌 則 
く styLe> 
body { 


snow。 yeLtowgreen) 3 
background-1mage: -webk1t-Linear- 

gradient(99deg, snow, yeLLowgreen) ぅ 
fiLteriprog1d:DXTmageTransform。 

Microsoft.Gradient(GradientType=9 , 

StartCotorStr=『yettowgreen' 。 

'snow') ぅ 

が /style> 

く /head> 

< く body> 


</body></htmt> 


background-1mage: Linear-gradient( の deg。 


EndCoLorStr= 


< く d1V><1mg src="S1710.png'' alt="> く /d1V> 


ブラ ウザ 表示 


wuc 功 は 


見 < な い 
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口 いい の の O 


に 
と 


イ 
リ 
フ 
ア 
レ 
ン 
ス 


4.0*2| 5.1*1 


@@w@0O 征 @ 


*1 6.x ま で は ベン ダー プレ フィ ックス (-webkit-) が 必要 
\2 ベン ダー プレ フィ ックス (-webkit-) が 必要 


円 形 グ ラ デ ー シ ョ ン を 表示 する 


| background-1mage: radiat-gradient( 但 。 全 、 圏 , 文 , 例 …): 
sq border-1mage: radiat-gradient( 夫 、 全 , 圏 , 文 , 今 …): 
Uist-styte-1mage: radal-grad1ent( 旬 人 圏 , 文 」 今 …: 


な ど 


に 所 : 源 イメ ー ジ を 指定 で きる プロ パティ 


⑯ … グラ デー ショ ン の 形 を 示す キー ワー ド 
ム … グラ デー ショ ン の サイ ズン 終点 を 示す 数 値 も し く は キー ワー ド 
較 … グラ デー ショ ン の 中 心 の 位置 

太 … グラ デー ショ ン を 開始 する 色 と 幅 
$ … グラ デー ショ ン を 終了 する 色 と 幅 


CSS3 新規 


CSS レベ ル 3 で は 、 画 像 を 指定 で きる プ 
パテ ィ (background-image な ど ) の 
直 と し て 、 グ ラ デ ー シ ョ ン を 指定 する こと 


(2) サイ ズ ノ 終点 
グラ デー ショ ン の サイ ズ を px 等 の 長 さ 
で 指定 、 も し く は 下記 の キー ワー ド で 終点 


が で きま す 。 円 形 の グラ デー ショ ン を 指定 
する に は 、「radiaLgradient」 と いう 関 
数 を 使い ます 。 


邊 本 書 執筆 時 点 で の 仕様 

radiaLgradient 関 数 は 、 通 常 は 5 つの 
値 を 取り ます 。 グラデーション の 形 、 サ イ 
ズ ノ 終点 、 中 心 の 位置 、 グ ラ デ ー シ ョ ン の 
開始 色 、 終 了 色 で す 。 グラデ ーション の 形 、 
サイ ズ ノ 終点 と 、 中 心 の 位置 は スペ ー ス で 
区 切っ て 指定 し ます 。 こ れ ら の 値 以外 は コ 
ンマ で 区 切り ます 。 

それ ぞ れ は 以下 の 書き 方 で 指定 し ます 。 


(1) 形 
指定 で きる キー ワー ド は 以下 の と お り で 
す 。 


・ Circle 円 : 初期 値 
*・ ellipse… 柄 円 


| mm 
218 : お ) 背景 画像 の 縦 ・ 横 位置 を 指定 する (P.210) 


を 指定 し ます 。 

また 、(1) 形 に ellipse を 指定 する 場合 は 、 
サイ ズ を パー セン ト で 指定 する こと も で き 
ます 。 


= closest-side… ボ ックス の 周囲 の 辺 の 
中 で 、 グ ラ デ ー シ ョ ン の 中 心 点 か ら も っ 
と も 近い 辺 

*・ farthest-side… ボ ックス の 周囲 の 辺 の 
中 で 、 グラ デー ショ ン の 中 心 点 か ら も っ 
と も 遠い 辺 

s closest-corner… ボ ックス の 四隅 の 中 
で 、 グ ラ デ ー シ ョ ン の 中 心 点 か ら も っ 
と も 近い 角 

s farthest-corner… ボ ックス の 四隅 の 
中 で 、 グ ラ デ ー シ ョ ン の 中 心 点 か ら も っ 
と も 遠い 角 : 初期 値 

(3) 中 心 の 位置 


中 心 の 位置 は 、「at 横 位置 縦 位置 ] と 
いう 書き 方 を し ます 。 縦横 の 位置 は 、 


background-position プ ロバ パテ ィ と 同じ  ・ 点 た つ 目 グラ デー ショ ン の 形 と サイ ズ 


則 


書き 方 で す 。 また は 終点 を 指定 し ます 。 形 は circle 


ellipse の どちら か で 指定 し 、 サ イズ 
(4) 開始 色 、 終 了 色 は px 等 の 長 さ の 単位 で 指定 し ます 。 ま 
4 つ 目 以降 の 値 で は 、lineargradient た 、 長 さ の 代わ り に 、 前 述 の closest- 


色 を 指定 し ます 。 る こと も で きま す 。 


関数 と 同様 の 書き 方 で 、 グ ラ デ ー シ ョ ン の side な どの キー ワー ド で 終点 を 指定 す 


: 3 つ 目 以降 … グ ラ デ ー シ ョ ン の 色 を 指定 


軒 VWebKit で の 書き 方 し ます 。 
本 書 哉 筆 時 点 で は 、VWebKit 系 (Safari6. 
x ま で 、 Android4.x、 IOS6.x ま で ) で は 、 
[-webkit-radiaLgradient] と いう ベン 
ダー プレ フィ ックス で グラ デー ショ ン を サ 
ポー ト し て いま す 。 CSS レベ ル 3 の 仕様 と 
は 異な り 、 下 記 の よう に 値 を 指定 し ます 。 


・ ひと つ 目 … グ ラ デ ー シ ョ ン の 中 心 位置 を ブラ ウザ 表示 
background-position と 同様 に 指定 公 な の は 
し ます 。 導き レン ピ す で せり 


ググ ルツ 

く !DOCTYPE htmt> 

<htmt tang="]a> 

<head> 葉 年 当 

< く styte> 

body { 
background-1mage: radiat-gradient(etLipse at center, seagreeh。 て tomato) ぅ 
background-1mage: -webk1 モ -radiat-gradient(20% 49%。 circLe ctLosest-s]de 。 

seagreen。 tomato) 3 + 

</styte> 

く /head> 

く body> 

<div><1mg src="S1711.png'' att=> く /d1V> 

</body> 

< く /htmt> 
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ロロ の の O 


に 
ーー の! 


> で NN に ヽ 由 


|40*2- 51a1 


10 
21 @ 、 *1 6.x ま で は ベン ダー プレ フィ ックス (-webkit) が 必要 
@| @ @ 0 し 』 g *2 ベン ダー プレ フィ ックス (-webkit-) が 必要 


G 

に 1 さく mam mm 2 旬 に) Ramee 

$ 直線 的 な グラデーション を 繰り 返し 表示 する 
ロ 

人 呈 | background-1mage: repeating-Linear-gradient( 坦 , 全 , 圏 : 
リ gl border-jmage: repeating-Linear-gradient( 鍛 , 人 る, 較 ): 

ラ List-styLe-1mage: repeating-Linear-gradient( 電 。 全 , 圏 ): 
レ な ど 

ス で グラ デー ショ ン の 角度 も し く は 方 向 を 示す キー ワー ド 


Pf 
全 … グラ デー ショ ン を 開始 する 色 と 幅 @ 
圏 … グラ デー ショ ン を 終了 する 色 と 幅 CSS3 新規 


EEC を 2: 竹 イメ ー ジ を 指定 で きる プロ パティ 


repeating-linear-gradient 関 数 は 、 線 
形 グ ラ デ ー シ ョ ン を 繰り 返し て 、 縮 模様 を 
作る こと が で きま す 。 

関数 の パラ メー タ の 指定 方 法 は 、 

linear-gradient 関 数 と 同じ で す 。 

な お 、WebKit 系 で は 、 そ れ ぞ れ 
[-webkit」 の ベン ダー プレ フィ ックス を 
つけ る こと で 、 グ ラ デ ー シ ョ ン を 繰り 返す 
こと が で きま す 。 

パラ メー タ の 指定 方 法 は 、 繰 り 返 さ な い 
場合 と 同じ で す 。 


サン ブル ソー ス 
< く !DOCTYPE htmt> 
<htmt tang="a"> 
<head> 葉 呈 当 
く StyLe> 
・rtg { 
background-image: repeating-Linear-gradient(279deg, forestgreen, yettowgreen 
40px。 forestgreen 89px) ぅ 
background-1mage: -webkit-repeating-Linear-gradient(9deg, forestgreen, 
yettowgreen 4 の px, forestgreen 89px) ぅ + 
く /styte> 
く /head> 
< く body> 
<d1v><1mg src="S1712.png" at て = らく /d1V> 
< く /body> 
く /htm1> 


ブラ ウザ 表示 
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@| @ @ @⑨ 0 生 の 12 
やく amsm mmm 2 先 人 5 
円 形 グ クラ デー ショ ン を 繰り 返し 表示 する 


| background-1mage: repeating-rad1at-gradient( 夫 全 
に 圏 , 學 つつ: 
border-1mage: repeating-radiat-gradient( 但 人 る 圏 , 


文 。 念 -): 


List-styte-1mage: repeating-radiat-gradient( 坦 全 
圏 , 文 , 多 …): 
な ど 
但 … グラ デー ショ ン の 形 を 示す キー ワー ド 
今 … グラ デー ショ ン の サイ ズ / 終 点 を 示す 数 値 も し く は キー ワー ド 
圏 グラデーション の 中 心 の 位置 5 
 … グラ デー ショ ン を 開始 する 色 と 幅 
@ グラ デー ショ ン を 終了 する 色 と 幅 OHI 陳 人 
イメ ー ジ を 指定 で きる プロ パテ ィ 


repeating-radiaLgradient 関 数 は 、 円 つけ る こと で 、 グ ラ デ ー シ ョ ン を 繰り 返す 
形 グ ラ デ ー シ ョ ン を 繰り 返し て 、 結 模様 を こと が で きま す 。 
作る こと が で きま す 。 パラ メー タ の 指定 方 法 は 、 繰 り 返 べ な い 
関数 の パラ メー タ の 指定 方 法 は 、 場合 と 同じ で す 。 
radiaLgradient 関 数 と 同じ で す 。 
な お 、WebKit 系 で は 、 そ れ ぞ れ 
「-webkit] の ベン ダー プレ フィ ックス を 


520 選 cm 
<!DOCTYPE html> ブラ ウザ 表示 
<htmt Lang="]a"> 


<head> 世 剖 肖 4 

<sty Le> 以 9 ト で も 

body { も や ほや さよ ふた ぃ 
background-1mage: repeating-radiat- 


gradient(circte at center, chocotate。 

orange 49px, oLivedrab 89px)} 
background-1mage: -webk1t-repeat1ngー 

rad1at-grad1en モ (center。 chocotate。 orange 

49px, otivedrab 89px) ぅ } 

く /sty Le> 

</head> 

く body> 

< く div><1mg src="S1713.png" altt="W> く /d1V> 

</body> 

</htmt> 
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C 

S 

s 枠 線 の 太 さ を 指定 する 

ロ 

全 border-width: 坦 : | 
リ border-top-w1dth: 坦 : 

フ border-teft-width: 坦 : 

レ border-rght-width: 埋 : 

ス border-bottom-width: 但 : @ … 梓 線 の 太 さ を 示す 数 値 


EE まま も : 揚 すべ で の 要素 


| 
\ 


border-left-width な ど 、 枠 線 の 太 さ の 関係 は 、 下 記 の と お り で す 。 
を 指定 で きる border-width 系 の プロ パ 


ティ は 、 太 さ を 数値 で 指定 する か 、thin | 値 が 1 つの 時 値 が ら つ の 時 
〆medium/thick の キー ワー ド で 指定 1 1 
し ます 。 初期 値 は medium で す 。 

た だ し 、 thin ノ medium ノ thick は 、 | ^ 園 人 | | 8 
thin ミ smedium ミ thick の 順に 太く な り | 1 1 | 
ます が 、 明 容 な 太 さ は 決め られ て いま せん 。 

「[-topl 「-bottom」 「-left」 「-right」 が 値 が 3 つの 時 舘 が 4 つの 時 
な い border-width プロ パテ ィ は 、4 方 向 
の 棒 線 の 大 さ を ま と め て 指定 する 一 括 指定 
で す 。 

値 は ひと つか ら 4 つ 指定 する こと が で 


き 、 指 定 する 値 の 個数 と 、 適 用 され る 方 向 


ザ サジ プル ツー エス 
く !DOCTYPE htmt> 
<htmt tang="]a"> 
<head> 
< く <meta charset="utf-8 リ > 
<titte> 枠 線 の 太 さ </titte> 
< く styLe> 
div { border-width: 1px 5pxj border- 
cotor: orangej border-styte: solid: 
padd1ng: 19pxj text-atign: centeri + 
</styLUe> 
</head> 
| <body> 
<div><1mg src="S1891.png" att=!W> く /d1V> 
</body> 
</htmt> 
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@@@@O す @ 


枠 線 の 種類 を 指定 する 


border-styte: 坦 : 

。 border-top-styLe: 坦 : 
border-teft-styte: 坦 : 
border-right-styte: 埋 : 
border-bottom-styte: 電 : 


| も 笠 すべ て の 要素 


・ 枠 線 の スタ イル を 指定 する 
キー ワー ド 


porder-left-style な ど 、 枠 線 の スタ イ 
ル (形状 ) を 指定 で きる borderstyle 系 
の プロ パテ ィ は 、 下 記 の キー ワー ド で ボー 
ダー の 種類 を 指定 し ます 。 


: none… ボ ー ダ ー な し 。 た だ し 、 他 の ボー 
ダー と 重なる と き は 、 重 な っ た 方 が 優 
先 : 初期 値 

: hidden… ボ ー ダ ー な し 。 た だ し 、 他 の 
ボー ダー と 重なる と き は 、 hidden が 人 慢 先 

: dotted… 点 線 

: dashed… 破 線 

: solid… 実 線 

: double… 二 重 線 


サジ 以上 ルツ 市 
| <!DOCTYPE html> 
<htmt tang="]a リ > 
<head> 江 連 当 
」 <StyLe> 
. div { border-widths 


5pxj padding: 5pxs 
border-cotor: sandybrown: marg1n: 19px 9: 
text-aLtgn: centeri } 
| ・bs1 { border-styte: 
・bs2 { border-styLe: 
・bs3 { border-styLe: 
. </styLe></head> 
<body> 


ridgej + 
Outse て 3 } 


<div ctass="bs2">ridge</d1Vv> 
<div ctass="bs3!">outset</d1v> 
< く /body> 

く /htmt> 


sotid dotted doubtej: + 


<div ctass=Wbs1"><]mg src="S1802.png!' alt=!W> く /d1v> 


- groove… 刻 まれ て いる よう に 見 える 線 
- ridge… 飛 び 出 す よ うに みえ る 線 
> inset… 線 の 内 側が 沈み 込ん で みえ る 線 
- outset… 線 の 内 側が 飛び 出す よう に み 
える 線 
「-top」 「-bottom」 「-left」「-right」 が 
な い border-style プロ パテ ィ は 、4 方 向 
の 枠 線 の スタ イル を まとめ て 指定 する 一 括 
旧 定 で す 。 値 は ひと つか ら 4 つ を 指定 する 
こと が で きま す 。 指定 する 値 の 個数 と 、 適 
用 され る 方 向 の 関係 は 、border-width プ 
パテ ィ と 同じ で す 。 
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@ ら @@@0O 生 @ 


C 

to1 

枠 線 の 色 を 指定 する 
ロ 

由 border-cotor: 坦 : 

リ 、。 border-top-cotor: 埋 : 

ラ border-Left-cotor: 坦 : 
レ border-right-cotor: 坦 : 
ス border-bottom-cotor: 坦 : 


| @ … 枠 線 の 色 を 指定 する 数 値 も し く は カラ ー ネ ー ム 


ep すべ て の 要素 


border-left-Color な ど 、 枠 線 の 色 を 指 ティ と 同じ で す 。 
定 で きる border-color 系 の プロ パテ ィ で 
は 、 色 を 指定 する 数 値 か カラ ー ネ ー ム を 指 


定 し ます 。 
初期 値 は この プロ パテ ィ を 指定 し た 要素 
の 文字 色 で す 。 


「-top」 「-bottom] 「-left] 「-right] が 
な い border-color プロ パテ ィ は 、4 方 向 
の 枠 線 の 色 を まとめ て 指定 する 一 括 指定 で UE 

す 。 値 は ひと つか ら 4 つ を 指定 する こと が 


で きま す 。 指定 する 値 の 個数 と 、 適 用 さ 
れる 方 向 の 関係 は 、border-width プ ロ パ 


サン フル ソー ス 識 


<!DOCTYPE htmL> 

<htmt tang=a"> 

| <head> 

」 <meta charset=Wutf-8 リ > 
<titte> 枠 線 の 色 </t1tLe> ーー 
< く styLe> 

|div { border-cotor: #FFE4E1 #FA8972 crimsonj border-styte: soLid: border-w1dth: 
、5pxj text-aUign: centeri padding: 19pxj + 
</styLe> 

. </head> 

く body> 

<div><1mg src="S1893.png" alt="> く /d1v> 

< く /body> 

く /htmt> 


224 : @ ら カラ ー ネ ー ム 一 覧 (P.302) 


本 証 記 2 1 色 


2 5.1 


@S@e@e@O@ 


枠 線 ス タイ ル を 一 括 指 定 する 


border: 参 人 画 : ] 
.。 border-top: 参 人 4 圏 : 
border-teft: 夫 人 圏 : 
border-right: 人 A 圏 : 
border-bottom: 夫 A 圏 : 
但 … 枠 線 の 太 さ を 示す 数 値 


合 … 枠 線 の スタ イル を 指定 する キー ワー ド 
圏 … 梓 線 の 色 を 指定 する 数 値 も し く は カラ ー ネ ー ム 


Q 
8 
の 2 
品 
バ 
ィ 
リ 
フ 
ア 
レ 
ン 
の 


すべ CO の 間 
border-left プロ パテ ィ な どの 桁 線 の 方 ー 部 の プロ パテ ィ の 値 を 省略 し た 場合 


向 が 決ま っ て いる プロ パテ ィ や 、 す べ て は 、 初 期 値 を 指定 し た の と 同じ に な り ま す 。 
の 方 向 の 要 線 を 示す border プロ パテ ィ 例え ば 、「border-teft: souid px」 
は 、 太 さ (borderwidth) プス タイ ル と 指定 し た 場合 、 色 は 文字 と 同じ 色 に な り 
(border-style) ン 色 (bordercolor) ます 。 
を 一 括 し て 指定 し ます 。 

値 は 、 太 さ ン スタ イル ノ 色 の 各 プ ロ パ 
ティ の 値 を スペ ー ス で 区 切っ て 指定 し ま 
す 。 それ ぞ れ の 値 を 指定 する 順序 は 自由 で 
す 。 


く !DOCTYPE htmt> 

<htmt tang="]a"> 

<head> 

<meta charset="utf-8 リ > 
<titte> 枠 線 ス タイ ル の 一 括 指 定 </titte> 
く styLe> 、 8 
div { border: 5px groove て omato: text- よー く シ ャ ン エ リマ 
auign: centerj padding: 19pxi } る ャ 
</styte> 

</head> 

< く body> 

<d1v><img src=!S1894.png!' aLt=W> く </d1V> 
</body> 

</htmt> 


に り 


関連 
で ) 作 株 の 大 き を 指定 する (P.222) 、 枠 線 の 種類 を 指定 する (P.223)、 枠 線 の 色 を 指定 する (P.224) : 225 
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C 

に ) 1 3 

s 枠 線 の 角 丸 を 指定 する 

ロ 

活 . border-radius: 埋 : @ ・・ 角 丸 の 半 径 を 示す 数 値 | 

リ 、。 border-top-Left-radius: 坦 : Q⑳ 時 

ラ border-top-r1ght-radus: 坦 : CS53 新規 | 

レ border-bottom-Left-radius: 坦 : | 

ス border-bottom-right-radius: 坦 : 
| 
0 


適用 可能 な 雪 琵 牙 MSXE: そ 3 
% 


border-radius 系 の プロ パテ ィ は 、 ボー を スペ ー ス で 区 切っ て 、 角 丸 の 半径 を 指定 
ダー の 角 を 丸く する 際 に 使い ます 。 し ます 。 指定 する 値 の 個数 と 、 適 用 され る 

border-top-left-radius な ど 、 角 の 位 角 丸 の 位置 の 関係 は 、 下記 の と お り で す 。 
置 を 指定 する プロ パテ ィ で は 、 値 を ひと つ また 、 角 丸 の 半 径 を 縦 と 横 で 別々 に 指定 
か ぶた つづ 指定 し ます 。 初期 値 は ひで す 。 ひ する 場合 は 、「 角 丸 の 横 の 半径 (ひと つて 
と つづ 指定 し た 場合 は 縦横 と も 同じ 半径 、 ス 4 つの 値 ) / 角 丸 の 縦 の 半径 (ひと つ ー4 
ペー ス で 区 切っ て ふた つの 値 を 指定 し た 場 つの 値 )] と 指定 する こと も で きま す 。 
合 は ひと つ 目 が 横 の 半径 、 ふ た つづ 目 が 縦 の 
半径 に な り ま す 。 こ ss 
値 を パー セン ト で 指定 し た 場合 値 が 1 つの 時 値 が 2 つの 時 値 が 3 つの 時 値 が 4 つの 時 
は 、 枠 の 横線 縦 線 の 長 さ に 対す | + 。 2 1 2 エ 2 


る 割合 で 半径 が 決ま り ま す 。 
border-radius プ ロ パ ティ は 、 
婦 た 1 4 3 


すべ て の 角 を 丸く する 一 括 指定 で | + に 2 8 
す 。 位置 ご と に ひと つて 4 つの 値 ※ 枠 の 周り の 番号 は 指定 し た 数 値 の 順序 に 対応 し ます 。 


ER [26990MIONUIECTUHIU 
く <!DOCTYPE html> | ーーーーーーーーーーーーーーーー ニ ーー こい 
<htmt tang="a'"> 1 。 1 
<head> 『 ず で *ー ん 1 
<meta charset="utf-8 リ > 1 1 
<title> 枠 線 の 角 丸 </titue> H 59 8 

1 
ま 
1 
1 
ま 


| <styLe> 1 

.br { border: 3px dashed corali padding: 19px: 2 メン 

marg1n: 19px 9j text-align: centeri } | ! さ 

.br1 { border-radius: 19pxj + すこ = ュ ニ ニ ェ ニニ ニニ ニニ ニー ニニ ニニ ニー ニー 
・br2 border-rad1us: 39px / 29px: } ィ 横 と 抱 で 半径 を 変え た 指定 中 
」 </styLe> し 
</head>< く body> 
<div ctass="br br1"><1mg src="S1805.png"' alt= ウ ></d1V> 
<p class="br br2"> 横 と 縦 で 半径 を 変え た 指定 </p> 

</body> 

| </htmt> 


こ ニ ーー ニニ ニニ ーー ニー ニニ ーー ニー ニー ニーー ニ ーー 
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11 2.2*2 5.1*1 


8leew@o ず 9 


\1 5.x ま で は ベン ダー プレ フィ ックス (-webkit-) が 必要 
*2 ペン ダー プレ フィ ックス (-webkit-) が 必要 


画像 ボー ダー の イメ ー 


ジ を 指定 する 


ロ NL の の O 


構 
.-。 border-]mage-source: 吉 : 


画像 の URL 


適用 可能 な 要素 次 : 必 Ye: 


に 
ーー の! 


CSS3 新規 


イ 
リ 
フ 
ア 
レ 
ン 
ス 


M 


border-image-source プ ロ パ ティ は 、 
ボー ダー に 使う 画像 の アド レス を 指定 し ま 
す 。 

画像 ボー ダー を 指定 する と き は 、 値 に 
url( 画 像 ボー ダー の URL) を 指定 し 、 画像 
ボー ダー を 指定 し な いと き は 、none を 指 
定 し ます 。 

初期 値 は none で す 。 

Opera 以 外 の ブラ ウザ は 、border- 
width プロパ ティ を 指定 し な いと 、 文 字 
の 下 に 画像 ボー ダー が 表示 され ます 。 そ 
れ に 加え て Firefox は 、none 以 外 の 値 で 


border-style プロ バ パティ も 指定 し な いと 、 
文字 の 下 に 画像 ボー ダー が 表示 され ます 。 

サン プル で は 、div 要 素 の 画像 ボー ダー 
の 画像 に 「borderpng」 ンー 
す 。 そ の た め 、 ブ ラウ ザ で 表示 する と 、 
像 ボー ダー と し て 赤 紫 の 花 が 表示 さ 1 
と が わか り ま す 。 


< く !DOCTYPE html> 
<htmL tang=! け a"> 
<head> 攻 昌 肖 
<styLe> 

div { text-atlgn: center: 

| border-styLe: solidi 

border-width: 29px: 
border-1mage-source: urt(border.png) 3 
border-image-sLice: 20: 
border-1mage-width: 20px: 

」 border-mage-repeat: repeat: } 

</sty Le> 

</head><body> 

<d1v><1img src="S1896.png"' alt= ら > く /d1v> 


| <p> ボ ー タ ダー 画像 <1mg src="border_S1806.png"></p> 


| </body> 
</htmt> 


ブラ ウザ 表示 
E を | 
トコ 第 
志 御 
系 第 
ヒコ 寺 
系 第 | . 
十 党 | 
十 第 
第 案 第 
ボー ダー 画像 寒 入 入 
の 


22Z 


_22*2. 5.1*1 


11 
由 を @ @ OO 


G 

s 画像 ボーダ ー の 表示 位置 を 指定 する 
 /。 
| 、。 border-1mage-sLice: 坦 : ( | 
4 ⑯ 画像 ボー ダー に 使う 領域 を 区 切る | 
9 数 値 ・ パ ー セ ント も し く は 人 

6 | 


すべ て om 


border-image-slice プロ パテ ィ は 、 画 数 値 の 場合 は ピク セル 数 、 パ ー セ ン テ ー 
像 ボー ダー と し て 使う 画像 の 領域 を 指定 す " ジ の 場合 は 画像 の 幅 ・ 高 さ に 対す る パー セ 


る プロ パテ ィ で す 。 領域 の 指定 の た め 、 上 ン テ ー ジ を 指定 し た こと に な り ま す 。 
下 左右 4 辺 か ら の サイ ズ を 数 値 か パー セン 値 は 、 ひと つか ら 4 つ を 指定 する こと が 
ト で 指定 し ます 。 で きま す 。 指定 する 値 の 個数 と 、 適 用 され 
ps こ | る 方 向 の 関係 は border-width プロパ ティ 
と 同じ で す 。 


時 | 上 記 の 値 の 後に スペ ー ス で 区 切っ て 
「fill] と いう 値 を 指定 する と 、 画 像 の ボー 
ダー に 使わ な い 部 分 ( 左 の 図 の 中 央 の 部 分 ) 
を 、 画 像 ボー ダー の 内 側 の 領域 の 育 景 画像 
と し て 使い ます 。 


下 


ーーーーーーー ゴ コーーーーーーーーーー 


<!DOCTYPE htmt> 
| <html tang="]a"> | 
<head> 詳 課 当 | 


<styLe> | | 

div { text-aUign: centers (イメー アメ メッ アッ メ メッ ャ メメ ッ メメ アッ っ 
border-styLe: soLidi 和 3 』 
| DOrderdWidth: 20PX: ル | 逐 尽 ぬ 


border-1mage-source: urtL(border.png) ぅ 
border-mage-sLice: 20: k 」 


W 
人 招 。【 
PND repeati + 久 


border-tmage-w1dth: 20px3 
</styte> | 人 生生 和 生生 
</head><body> | | 
「<div><1mg src="S1807.png" alt=W"></diV> | 案 栄 乏 
<p> ボ ポー ダー 画像 <img src="border.png"></p> 二 生 利 吉 | 
</body> | ボー ダー 画像 和 寺 衝 各 | 
| </htmt> | 
| 


228 


11 


2.2*2 5.1*f 


の @@0 笠 @ 


きす 5.x ま で は ベン ダー プレ フィ ックス (-webkit-) が 必要 
\2 ベン ダー プレ フィ ックス (-webkit-) が 必要 


画像 ボー ダー の 太 さ を 指定 する 


構 
border-1mage-width: 夫 : 


介 … 画像 ボー ダー を 表示 する 幅 プ 高 さ を 示す 


数 値 も し く は auto 
すべ co 


* | 
C553 新規 


border-image-widtih プ ロ パ ティ は 、 


値 は ま 、 ひ と つか ら 4 つ 指定 する こと が で 


画像 ボー ダー を 表示 する 際 の 、 ボ ックス 側 
の 信 域 を 指定 する プロ パテ ィ で す 。 領域 の 
指定 の た め 、 上 下 左 右 4 辺 か ら の サイ ズ を 


きき ます 。 指定 する 値 の 個数 と 、 適 用 され る 
方 向 の 関係 は border-width プ ロ パ ティ 
と 同じ で す 。 


指定 し ます 。 
指定 で きる 値 は 下記 の と お り で す 。 


: 長 さ を 表 す 値 (5px な ど ) … 指 定 し た 
幅 / 高 さ 

: パー セン ト … ボ ポー ダー イメージ 領 域 の 幅 
グ 高 さ に 対す る 割合 

数値 …border-width プロ パテ ィ の 値 に 
対す る 倍率 

: auto…border-image-slice プ ロ パ ティ 
で 指定 し た 幅 ン 高 さ 


Opera 以 外 の ブラ ウザ は 、borger- 
width プロ パテ ィ を 指定 し な いと 、 文 字 
の 下 に 画像 ボー ダー が 表示 され ます 。 そ 
れ に 加え て Firefox は 、none 以 外 の 値 で 
border-style プロ パテ ィ も 指定 し な いと 、 
文字 の 下 に 画像 ボー ダー が 表示 され ます 。 


サン プル ソー スズ 
く !DOCTYPE html> 
<htmL tang="]a"> 
」 <head> 葉 党 肖 
< く styLe> 
div { text-atign: centers 
border-styte: sol1d: 
| border-width: 49px 29pxs 
| border-1mage-source: urt(border.png) 
」 border-1mage-sLice: 20: 
border-1mage-width: 49px 20pxs 
border-1mage-repeat: repeat: + 
</styte> 
</head> <body> 
<div><1mg src=!S1808.png!' att=W ゆ > らく /d1V> 
| <p> ボ ー ダ ー 画 像 <3mg src="border.png"></p> 
</body> 
</htmt> 


1 


| 


トコ ヽ が 往 
むう いい 74 の か 
トコ 第 
に コ 劉 
ココ 彼 
香 6 き 壇 
有 
衛 信 系 
午 午 宣 
ボー ダー 画像 雪 知 筆 
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口 NO の O 


ヽ ー 
の 


2 
リ 
フ 
ア 
レ 
ン 
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_22*2. 5.1* ま 1 
K 】 @ o 弄 レ *1 5.x ま で は ベン ダー プレ フィ ックス (-webkit-) が 必要 
上 2 ベン ダー プレ フィ ックス (-webkit-) が 必要 


ョ 像 ポー ダー の 拡 吾 を 指定 する 


border-1mage-outset: 坦 : Q⑩ 
⑯ 画像 ボー ター の 拡張 領域 を 指定 する 数 値 El 新規 


: 品 NL の O の O 


NT 
二 
ジ 


ィ 
リ 
フ 
の 7 
レ 
ン 
明 


適用 可能 な 要素 六 :Avd の E- よ 3 


border-image-outset プ ロ パ ティ を 指 。 width プロ パテ ィ を 指定 し な いと 、 文 字 
定 す る と 、 画 像 ボー ダー を 表示 する 領域 を 、 の 下 に 画像 ボー ダー が 表示 され ます 。 そ 
ボー ダー ボッ クス の 外 に 広げ る こと が で き れ に 加え て Firefox は 、none 以 外 の 値 で 
ます 。 border-style プロ パテ ィ も 指定 し な いと 、 
値 は 、 長 さま た は 数 値 で 指定 し ます 。 数 文字 の 下 に 画像 ボー ダー が 表示 され ます 。 
直 で 指定 し た 場合 は 、border-width プ 
パテ ィ の 値 に 対す る 倍率 を 表し ます 。 
また 、 値 は ひと つて 4 つ を スペ ー ス で 
区 切っ て 指定 する こと が で きま す 。 指定 
する 値 の 個数 と 適用 され る 方 向 の 関係 は 、 
borderrwidth プロ パテ ィ と 同じ で す 。 
Opera 以 外 の ブラ ウザ は 、border- 


サ ツ ザ プル ジー スズ 
く !DOCTYPE htmL> 
<htmt tang="]a"> 
<headz 共 衣 消 
く styLe> 
div { text-atign: center: 
border-styte: sol1di 
border-w1dth: 20pxs 
border-1mage-outset: 1 9} 
border-1mage-source: urt(border.png) 
border-1mage-sLice: 20} 
border-1mage-w1dth: 29pxs 
border-1mage-repeat: repeat:』 + 
く /'sty Le> 
</head><body> 
<d1v><1mg src="S1899.png!"' alt=""> く </d1V> 
<p> ボ ー ダ ー 画 像 <img src="border.png"> 
</body> 
く /htmt> 
剛 


* 


常 党 栄 失 党委 党 栄 党 
。 5 
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| 2.2*2| 5.1*11 


@lele@O 事 @ 


を 1 5.x ま で は ベン ダー プレ フィ ックス (-webkit-) が 必要 
\2 ベン ダー プレ フィ ックス (-webkit-) が 必要 


画像 ポ ボー ダー の 繰り 返し を 指定 する 


構 
.。 border-1mage-repeat: 坦 


人 @ 画像 ボー ダー の 繰り 返し 方 を 指定 する キー ワー ド 


上 は 85 凍 すべ て の 要素 


3 


CSS3 新規 


border-image-repeat プ ロ パ ティ は 、 
ボー ダー の 画像 の 繰り 返し 方 法 を 指定 する 
パテ ィ で す 。 指定 で きる キー ワー ド は 
以下 の と お り で す 。 


- stretch… 領 域 全 体 を 覆う よう に サイ ズ 
変更 し て 描画 

・ repeat… 領 域 全 体 に 繰り 返し て 描画 

: round… 繰 り 返す 画像 が 切れ な いよ う 
に サイ ズ 変 更 し て 描画 

: space… 繰 り 返す 画像 が 切れ な いよ う 
に 間 に ス ペー ス を 入れ て 描画 


値 は 、 ひ と つま た は ふた つづ 指定 で きま す 。 


ぶた つづ 指定 し た 場合 は 、 ひ と つづ 目 が 横 方 
向 、 ぶ た つ 目 が 縦 方 向 の 繰り 返し 方 法 の 指 
定 に な り ま す 。 

な お 、Firefox は キー ワー ド space の 
指定 が 効 さ ませ ん 。 Chrome、Safari、 
Androlid、IOS は キー ワー ド round と 
space の 指定 が 効 さ ませ ん 。 

Opera 以 外 の ブラ ウザ は 、border- 
width プロ パテ ィ を 指定 し な いと 、 文 字 
の 下 に 画像 ボー ダー が 表示 され ます 。 そ 
れ に 加え て Firefox は 、none 以 外 の 値 で 
border-style プロ パテ ィ も 指定 し な いと 、 
文字 の 下 に 画像 ボー ダー が 表示 され ます 。 


| く !IDOCTYPE htmt> 

| <htmt 1ang="]a"> 

| <head> 紅 語 肖 

| <style> 

div { text-aL1ign: centers 

border-stytle: solidj 
border-w1dth: 20pxs 

| border-1mage-source: urL(border.png) 
border-1mage-sLice: 20: 
border-1mage-w1dth: 29pxi 

| border-1mage-repeat: stretch: } 

| </styte> 

| </head> 
く body> 
<div><1mg src="S1810.png'' att="W> く /d1v> 
<p> ボ ー ダ ー 画 像 <img src="border.png"> 

| </body> 

| </htmt> 


ブラ ウザ 表示 
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2.2*2 5.1*1 


@ ee @o や @ 


1 5.x ま で は ベン ダー プレ フィ ックス (-webkit-) が 必要 
ま ※2 ベン ダー プレ フィ ックス (-webkit-) が 必要 


画像 ポー ダー の スタ イル を 一 括 指 定 する 


border-1mage: 坦 人 る / 隊 
4 


適用 可能 な 要素 六 JMex3 の E ま 3 


画像 ボー ダー の 画像 URL (border-image-Source の 値 ) 

人 … 画像 ボー ダー に 使う 領域 を 区 切る 数 値 ・ パ ー セ ント も し く は fi 
瑞 画像 ボー ター を 表示 する 幅 / 高 さ を 示す 数 値 も し く は auto 

文 … 画像 ボー ダー の 拡張 領域 を 指定 する 数 値 

久 画像 ボー ター の 繰り 返し 方 を 指定 する キー ワー ド 


/ 文 金 : 


CSS3 新規 


border-image プロ パテ ィ は 、border- 
image 系 の プロ パテ ィ を まとめ て 指定 す 
る 一 括 指定 で す 。 

各 プ ロ パ ティ の 値 を スペ ー ス で 区 切っ 
て 條 べ ます 。 た だ し 、border-image- 
slice/boder-image-width グ border- 
image-outset プ ロ パ ティ の 値 の 間 は 、[/] 
で 区 切り ます 。 

Opera 以 外 の ブラ ウザ は 、border 
width プ ロ パ ティ を 指定 し な いと 、 文 字 
の 下 に 画像 ボー ダー が 表示 され ます 。 そ 
れ に 加え て Firefox は 、none 以 外 の 値 で 
border-style プロ パテ ィ も 指定 し な いと 、 


文字 の 下 に 画像 ボー ダー が 表示 され ます 。 

Opera は 、borderimage プロ パテ ィ 
に は プレ フィ ックス つき の プロ パテ ィ 
(-o-borderimage) で 対応 し て いま す が 、 
下記 の 指定 に は 対応 し て いま せん 。 


- border-image-outset プ ロ パ ティ の 
指定 

: border-image-repeat プ ロ パ ティ に 
space を 指定 

- border-image-slice プロ パテ ィ に fi 
を 指定 (fill を 指定 し な く て も Ll 指定 と 
同じ に な る ) 


<!DOCTYPE htmt> 

<htmt tang="]a"> 

<head> 突 正 肖 

< く styLe> 

div { text-atign: center: 

border-styLe: solids 

border-width: 29pxs 

border-1mage: urt(border.png) 29 / 29px 
Fepeat} 

+ 


く /styte> 

</head> 

<body> 

<div><img Src=!S1811 .png'" alt=!> く /d1V> 
<p> ボ ー タ ダー 画像 <img src="border.png"> 

く /body> 

< く /htmt> 


| 
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歯 ぇ ネー 


半 計 聞 入 第 池 党 
半 池 入 党 


画像 ボー ダー の 繰り 返し を 指定 する (P.231) 


画像 ボー ダー の イメ ー ジ を 指定 する (P.227)、 画 像 ボー ダー の 表示 位置 を 指定 する (P.228)、 
画像 ボー ダー の 太 さ を 指定 する (P.229) 、 画 像 ボー ダー の 拡張 を 指定 する (P.230) 、 


2x*。 5.1 


8 @ き 】 O' 邊 g * 2x ま で は ペン ダー プレ フィ ックス (-webkit-) が 必要 
ポッ クス の 影 を 表示 する 


.」 box-shadow: 参 人 A 圏 女 金 〇 O: 


文 … 水平 方 向 の 長 さ 
… 垂直 方 向 の 長 さ 
… ぼかし の 長 さ 
… ひろ が り の 長 さ 
… Inset 


華 、 選 用 可能 な 要素 雪 :MYq の よき 


6 金 寺 軒 人 @@ 


| 


CSS3 新規 


box-shadow プロ パテ ィ は 、 要 素 の 
ボッ クス に 影 を つけ ます 。 

値 と し て 、2ー4 つ の 長 さ を 表す 値 と 、 
色 を 表す 値 、「inset] の キー ワー ド を 、 ス 
ペー ス で 区 切っ て 指定 し ます 。 


指定 され て いる 色 で 影 が つき ます 。 
「inset] の キー ワー ド を 指定 する と 、 影 
が ポ ボッ クス の 中 に で きま す 。 指定 し な し 場 
合 は ボッ クス の 外 に で きま す 。 

また 、 こ こま で の 値 の 組み 合わ せ を コン 


ロロ の の の 
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と 
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マ で 区 切っ て 複数 指定 し 、 複 数 の 影 を つけ 
る こと も で きま す 。 

初期 値 は 、 ボ ックス の 影 を 表示 させ な い 
キー ワー ド none で す 。 


最初 の ふつ の 値 は 、 ボ ックス と 影 と の 
水平 垂直 方 向 の 幅 を 表し ます 。3 二 目 の 
値 は 、 影 を ば か す 際 の 幅 を 表し ます 。 この 
値 を 0 に する と 、 ぼ けず に くっ きり と し た 
影 に な り ま す 。 そし て 、4 プ つ 目 の 値 は 、 影 
の 広がり 幅 を 表し ます 。 

色 を 省略 し た 場合 、color 


央 デイ で 


<!DOCTYPE htmL> 


<htmt tang="]a"> 

<head> 世 店 肖 

<styLe> 

bs1 { box-shadow: 7px 10px 5px #FF9900: 
. text-aLign: centeri } 

・bs2 { box-shadow: 5px 5px 5px #FF9999, 
1 の px 19px 19px 2px #FFCCFFj 

く </styte> 

< く /head> 

<body> 

< く d1V ctass="bs1"><1mg src="S1812 .png"' 
att= ら > く /d1V> 

<p ctass=bs2> こ っ ち は 影 が 2 つ あ る の さ 一 </p> 


こっ ち は 影 が ふた つ あ る の さ ー 1 


| </body> 

| </htmt> 

| | | 

【 8 _』 

ら の 長 さ (P.164)、 カ ラー の 値 (P.165) 233 
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SG@@@0 生 @ 


リス トマ ー カ ー の 種類 を 指定 する 


構 
・。 List-styte-type: 


⑯ リスト マー カー を 指定 する キー ワー ド 


店 古宇 位 disSplay プロ パテ ィ の 値 が listitem] に な っ て いる 要素 


ist-style-type プロ パテ ィ は 、 リ スト 
項目 の 先頭 に 表示 する マー カー の 種類 を 指 
定 す る プロ パテ ィ で す 。 以下 は 、 指定 で き 
る キー ワー ド の 抜粋 で す 。 


: disc… 中 黒 : 初期 値 

・ Circle… 円 

・ sqUare… 四 角 

・ decimal… 連 番 (1、2、3、 …) 

・ decimaLleading-zero… 頭 に 0 が つ 
く 1 か ら 始 まる 連 番 (01、 02、 03、 …) 

*x lower-roman… 小 文字 の ロー マ 数 字 ((、 
中 、 昌 、… う 


く !DOCTYPE htmL> 
| <htmt tang="]a"> 
| <head> 
<meta charset=Wutf-8"> 

<titte> リ スト マー カー の 種類 </t1tte> 
<styLe> 

ot 11 { List-styte-type: tower-romani 
中略 33AK5 | 
</head> 


< くい > 縄 文 杉 </t1> 
<Ui> 宮 之 浦 岳 </'1> 
< くい > 千尋 の 滝 </1> 

</o> 

</body> 

</htm1t> 


: Upper-roman… 大 文字 の ロー マ 数 字 
(|、 昌 、 則 、 …) 

: lowerlatin ン loweralpha… 小 文字 
の アル ファ ベッ ト (a、b、c、 …、2Z) 

* upper-latin upper-alpha… 大 文字 
の アル ファ ベッ ト (A、B、C、…、Z) 

: none… な し 


仕様 に は 多く の マー カー が 定義 され て い 
ます 。 

http://WWwW.Ww3.org/TR/css3- 

lists/#ua-stylesheet 


i 縄文 杉 


証 宮之浦 岳 
測 . 千尋 の 滝 
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@@@@0 す @ 
C 
リス トマ ー カ ー の 画像 を 指定 する 8 
List-styte-1mage: 雪 : ul 
⑯ リス トマ ー カ ー の 画像 URL も し く は none | ・ 室 
| レ 
| 有 
の 


| MM il 
| | 


TH pay フロ バテ ィ の 価 が [letiteml に な っ て いる 要 義 滑 


list-style-image プロ パテ ィ は 、 リ スト 
マー カー を 画像 で 表示 する 際 に 使い ます 。 
値 に url( 画 像 の URL) を 指定 し 、 画 像 を 指 
定 し な いと き は 、none を 指定 し ます 。 
初期 値 は none で す 。 

サン プル で は 、 貞 要素 の リス トマ ー カ ー 
の 画像 に 「list.png] を 指定 し て いま す 。 
その た め 、 ブ ラウ ザ で 表示 する と 、 リ スト 
マー カー の 画像 と し て 赤 紫 の 花 が 表示 され 
る こと が わか り ま す 。 


サン プル ソー スズ 間 
<!DOCTYPE htmt> プラ ウザ 表示 | 
<htmt tang="]a"> | 二 | 
<head> | こっ か いき 倒さ た も 
<meta charset=Wutf-8!> | 2 
<titLe> リ スト マー カー の 画像 </tttLe> 
く styLe> 
ut 11 { List-styLe-1mage: urt(List.png)j } | 
EE 骨 扱 /styUe> | 
</head> | 
<body> 放 肖 当 | 
< く ut> | 
<Li> ブ ナ の 原生 林 </t1> | 
<Ut> 和 白神 岳 </ Li> | 計 ブナ の 原生 林 
< く > 鳴 門 滝 </L1> | 議 白神 岳 ] 
</uL> | 
NN | 凌 只 門 
</html> ] 
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Seeeote 
リス トマ ー カ ー の 位置 を 指定 する 


橋 
に 。 Uist-styte-pos1t1on: 坦 : 


⑱ リス トマ ー カ ー の 位置 を 指定 する キー ワー ド 


C 
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用 ま 書 display プロ パテ ィ の 値 が 「IjiStitem] に な っ て いる 要素 


etsl 間 パテ ィ は 、 リ そのため 、 ブ ラウ ザ で 表示 する と 、 リ スト 
トマ ー カ ー の 位置 を 指定 する プロ パテ ィ マー カー の 位置 が 枠 線 の 内 側 に 表示 され る 
で す 。 こと が わか り ま す 。 
指定 で きる キー ワー ド は 、 以 下 の と お り 
'@ ぐ 9。 


・ inside… リ スト マー カー を 枠 の 中 に 表示 
: outside… リ スト マー カー を 枠 の 外 に | 
表示 : 初期 値 て Uh っ て う - と - 


サン プル で は 、「 知 床 五 湖 」 と いう テキ 
スト が 入っ て いる 1 要素 の リス トマ ー カ ー 
の 位置 を 「inside」 に 指定 し て いま す 。 


| 知床 五 湖 
に 9 も 『 8 上 人 | 
beP40pA 1 の. ・ | カム イワ ッ カ 湯 の 滝 | 


< く !DOCTYPE htmL> 
<htmt tang="a リ > 
<head> | 
<meta charset="utf-8!> 人 ィ 
<titte> リ スト マー カー の 位置 </titLe> 
< く styLe> 
」 ut 11 { border: 1px soUid royaLbtuei } ・Lp-1 { List-styLe-positon: ins1dej } 
EH:K/styUe> 
</head> 
<body> 半 当 | 
く ul> | 
< ctass="Lp-1"> 知 床 五 湖 </U1> | 
<Ui> 殺 止 岳 </11> 
<Ui> カ ムイ ワッ カ 湯 の 滝 </Li> 
</ul> 
</body> 
</htmt> 


半 
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2.2 51 ま 


@ee@o@ ぁ 


リス トス タイ ル を 一 括 指 定 する 


構 
に List-style: 倫 A 較 : 


人 で リス トマ ー カ ー を 指定 する キー ワー ド 
全 … リス トマ ー カ ー の 画像 URL も し く は none 
圏 … リス トマ ー カ ー の 位置 を 指定 する キー ワー ド 


に 選 遍 久 計 仁 diSplay プロ パテ ィ の 値 が 「listitem」 に な っ て いる 要素 


09 


lst-style プ ロ パ ティ は 、list-style- 
type ノ list-style-image list-style- 
position の 3 つの プロ パテ ィ を まとめ て 
指定 し ます 。 

それ ぞ れ の プロ パテ ィ の 値 を 指定 する 順 
序 は 、 1 で す 。 

な お 、list-style-type プロ パテ ィ と list- 
Style-image プロ パテ ィ の 値 を どちら も 
指定 し た 場合 は 、list-style-image プロ パ 
ティ の 指定 が 優先 され ます 。 

サン プル で は 、 要素 の り ス トマ ー カ ー 
の 画像 に 「list.bpng]l、 リ スト マー カー の 


位置 に 「inside」 を 指定 し て いま す 。 そ 
の た め 、 ブ ラウ ザ で 表示 する と 、 リ スト マー 
カー の 画像 が 要 線 の 内 側 に 表示 され る こと 
が わか が り ま す 。 


< く !DOCTYPE htmt> 
<htmt tang="]a"> 
<head> 
<meta charset=Wutf-8 リ > 
<titLe> リ スト スタ イル の 一 括 指定 </t1tLe> 
<styte> 
ut 11 { tist-styte: urt(List.png) 1nsides 
border: 1px sotid royaubLuei} 
上 E 昌 :K/styte> 
く </head> 
<body>E 潮 当 
< く ul> 
< 父島 </L1> 
<1j> 母 島 </ 1> 
<U1> 硫 黄 島 </t1> 
</u1> 
</body> 
</htmL> 


関連 リス トマ ー カ ー の 種類 を 指定 する (P.234) 、 リ スト マー カー の 画像 を 指定 する (P.235) 、 


リス トマ ー カ ー の 位置 を 指定 する (P.236) 


3/ 


G 
S 
回 
。 
口 
が 
ィ 
リ 
記 
4 
レ 
ン 
寺 


@@@@O 加 の 


C 
| 表 組 の 織 列 の 幅 を 固定 する 
バ ュー 上 INN 昌史 
4 | tabte-Layout: 旬 : 
記 @ -… 表 組 の レイ アウ ト 方 法 を 示す キー ワー ド 
ン 
ス 
テー ブル 要素 、 イ ン ラ イン テー ブル 可 素 開 


table-layout プロ パテ ィ は 、 テ ー ブ ル 
の 列 幅 を 固定 する か どう か を 指定 する プ 
ディ イ です 。 

指定 で きる キー ワー ド は 次 の と お り 
で 
* fixed…width プロ パテ ィ が 指定 され て 

いる 列 は その 幅 。 そ れ 以 外 の 列 の 幅 は 

テー ブル の 残り の 横幅 を 均等 に 分 割 。 

*・ auto…width プロ パテ ィ が 指定 され て 

いる 列 は それ が 最大 幅 。 それ 以外 の 列 

の 幅 は セル の 中 身 の 幅 に 応じ て 分 配 : 


MM 
<!DOCTYPE htm1> ] 2 に コー 
<htmt tang=" お a"><head> 革 当 1 

は ILS | | 了 腕 立て 伏せ 2345678901234567 901234567890 
| tabte { tabte-Layout: fixedj width: 399pxj } 属 5 本 

td { border: 1px solid royatbtue: } | 

・c1 { width: 1099pxj } 
E: 衣 /styUe> | 
</head><body> 写 症 当 1 0 
| <tabte> 3 
<caption> 練 習 メ ニュ ー</caption> 

<tr><th ctass="c1"> 項 目 </th><th> 回 数 </th></tr> 

<tr><td> 腕 立て 伏せ く </td><td>123456789912345678991234567899</ て d> く /r> 

| <tr><td> 乱 取り </td> く td>1 く </td> く /tr> 

く /tabLe> 

</body> 

く /htmL> 
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ら @@@0 車 @ 


C 
表 組 の 枠 線 を セル ご と に 分 杉 す る 8 
ey 
border-coLtapse: 坦 : ? 
@ … 表 組 の ボー ダー の 表示 方 法 を 指定 する キー ワー ド 2 
ン 
ス 
[ 半 用 可能 な 要 来 馬 p 有 た 間 


border-collapse プロ パテ ィ は 、 表 組 「collapse」 を 指定 し て いま す 。 その た め 、 
の ボー ダー の 表示 方 法 を 指定 する プロ パ ブラ ウザ で 表示 し た と き に 、 表 組 内 で 隣り 


ティ で す 。 合う セル の 枠 線 が まとめ て 1 本 に な っ て い 
指定 で きる キー ワー ド は 以下 の と お り る こと が わか り ま す 。 
で す 。 


*・ separate… 個 々 の セル に ボー ダー を 表 
示 : 初期 値 
・collapse… 隣 り 合 う ボ ー ダ ー は 1 本 に 隆 技 2 | 
まとめ て 表示 


サン プル で は 、 表 組 の セル ご と の 枠 線 
を 分 離す る めか まとめ る か の 設定 と し て 


<!DOCTYPE htmL> 
<htmt tang=a"><head> 記 二 邊 練習 メニ ュー 
<styLe> 項目 | 回 数 
tabte { border-cottapse: coLtLapsei } 四股 12345678901234567890 
th,td { border: 1px solid orchidi } に 
E 出 :/styte> ぶつ か り 稽 古 |] 
</head><body> 攻 加 肖 
く tabLe> 
<capt1on> 練 習 メ ニュ ー</caption> 、 
<tr><th> 項 目 </th><th> 回 数 </th></ て r> 
<tr><td> 四 股 </td><td>12345678991234567890</td> く /tr> 
<tr><td> ぶ つか り 稽 古 </td> NM 
く /tabte> 
</body> 
</htmt> 
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9eeeo き ぁ 


C 

s と な り 合う セル と の 枠 線 の 間隔 を 指定 する 
5 則 border-spac1ng: 坦 : | 
タ @ … 長 さ を 示す 数 値 

レ 

ス 


四 EE に 2 を 生 蘭 テー ブル 要素 


border-spacing プ ロ パ ティ は 、border- 初期 値 は 仕様 で は 0 と な っ て いま す が 、 
collapse プロ パテ ィ に separate を 指定 モダ ン ブ ラ ウザ の 実装 で は 2px と な っ て 
し て いる 際 に 、 隣 接する セル の リス トマ ー いる よう で す 。 
カー と の 幅 を 指定 する プロ パテ ィ で す 。 Ear 
値 と し て 、 長 さ を 表 す 値 を 指定 し ます 。 ド - 
値 は ひと つも し く は 県 た づつ 指定 で き 、 そ | 
れ ぞ れ 下 記 の よう に 指定 され ます 。 | 


- 値 を ひと つ 指定 -… 横 に 同じ 値 を 指定 | 
- 値 を ふた つ 指定 … ひ と つづ 目 が 横 方 向 ( 左 
右 に 隣接 する セル の 間 ) の 幅 で 、 ふ た | 
つ 目 が 縦 万 向 の 幅 を 表し ます 項目 


Eo | | 加 
| 違 


mnPo) ジ 


< く !DOCTYPE htmlt> | 
| <htmt tang="a"> | | 
<head> 地 当 し ad / 
<styLe> | 
tabte { border: 1px soLid green: border-spac1ng: 19px 29pXj } 
| td { border: 1px soLid siennai + | 
紅 肖 : 衣 /styUe> 1 
</head> 
<body> 記 剖 当 
| <tabte> 
<capton> 練 習 メ ニュ ー</capt1on> 
<tr><th> 項 目 </th><th> 回 数 </th></ モ r> 
| <tr><td> 突 き </td><td>12345678991234567890</ て d> く </ て r> | 
| <tr><td> 組 手 く </td> く td>1</td></ て r> 
く /tabte> 
</body> 
| </html> 


| 
更 
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@eleleos@ 間 ー 
値 が 入っ て いな い セ ル の 表示 方 法 を 指定 する 


YS FE 5 SN 


口 NIO の OO 


に 
二 


empty-cetts: 坦 : 
倫 … 空 の セル の 表示 方 法 を 示す キー ワー ド 


ィ 
リ 
の 
ア 
レ 
ン 
ス 


EC を まま : 但 テー ブル の セル の 要素 


empty-cels プ ロ パ ティ は 、border- 
Collapse プロ パテ ィ に separate を 指定 
し て いる 際 に 、 中 身 が 空 の セル に 対し て 、 
ボー ダー と 背景 を 表示 する か どう か を 指定 
する プロ パテ ィ で す 。 

指定 で きる キー ワー ド は 以下 の と お り 
で す 。 


: show… 中 身 が 空 の セル も ボー ダー と 背 
景 を 表示 : 初期 値 

・ hide… 中 身 が 空 の セル は ボー ダー と 背 い っ 
景 を 非 表 示 練習 メニ ュー 


項目 回 数 
素振り |12345678901234567890| 
<!DOCTYPE htmt> 打込み 稽古 
<htmt tang=! け a"> 
<headz 馬 党 由 、 ニー ai 
く styLe> 


tabte { border-coLtapse: separate: border: 1px soLid navyj } 
| td { border: 1px soLid redj background-cotor: Linenj empty-cetLs: hide: } 
E 山 に /styte> 

</head><body> 記 当 

< く tabte> 

<caption> 練 習 メ ニュ ー</caption> 

<tr><th> 項 目 </th><th> 回 数 </th></tr> 

| <tr><td> 素 振り </td><td>12345678901234567899</td> く / て r> 

| <tr><td> 打 込み 稽古 </td><td></ モ d> く / て r> 

く /tabte> 

</body> 

| く /htmt> 
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6@eeOos ぁ 
表 組 の タイ トル の 表示 位置 を 指定 する 


ロロ の の O 


^ー 
つの 


caption-s1de: 夫 : 
亀 … タイ トル の 表示 位置 を 示す キー ワー ド 


イ 
リ 
四 
ア 
レ 
ン 
ス 


Ei が ま 王 組 テー ブル の キャ プション の 要素 


caption-side プロ パテ ィ は 、 テ ー ブ ル こと が わか が り ま す 。 
の タイ トル を テー ブル の 上 下 ど ちら に 表示 
する か を 指定 する プロ パテ ィ で す 。 

指定 で きる キー ワー ド は 以下 の と お り 
で す 。 


: top… タ イト ル を 上 に 表示 : 初期 値 
・ bottom… タ イト ル を 下 に 表示 


け ン プル で は 、 表 組 の タイ トル の 表示 位 
置 と し て 「bottom」 を 指定 し て いま す 。 
その た め 、 ブ ラウ ザ で 表示 し た と き に 、 表 


貞 MMM2MMON20 

く !DOCTYPE htmL> 

<htmt tang="]a"> 

<headzE 問 当 

<styLe> | 
tabte { border: 1px souid bLuej + ーー イー テーーー ィ ーー ーーーーーーーーーー バ 
td { border: 1px souid red: background-coLor: goldj empty-ceLLs: hides 
captton { caption-s1ide: bottomi } 


世に /styte> 
</head><body> 世 問 当 
< く tabte> 


<capton> 練 習 メ ニュ ー</caption> 

<tr><th> 項目 </th><th> 回 数 </th></ モ r> 

<tr><td> 素 引き く /td><td>12345678991234567899 く / モ d> く </ て r> 
<tr><td> 巻 墓 </td> く td>1 く </td> く /tr> 

1 /tabte> 

</body> 

1 < /htmt> 


に SN グ 
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@6eeeos@ 
ボッ クス の 幅 と 高 さ を 指定 する 


he1ght: 念 : 


借 ・ 幅 を 示す 数 値 ま た は auto 
今 … 高 さ を 示す 数 値 ま た は auto 


AN で NN ビュ ゴリ ニ ロ NN の の の 


科す べ て の 要素 
※ Width: 非 置換 イン ライ ン 要 素 テー ブル の 行 テーブル の 行 グル ー プ を 除く 
出 半 ※ height: 非 置換 イン ライ ン 要 素 テ ー ブ ル の 列 プ テー ブル の 列 グ ルー プ を 除く 了 
width プロ パテ ィ と height プ ロ パ ティ また 、 値 と し て auto を 指定 する こと も 
は 、 通 常 は 内 容 の 幅 と 高 さ を 指定 する ブ で きま す 。 こ の 場合 は 、 状 況 に 応じ て 自動 
パテ ィ で す 。 た だ し 、 非 置換 イン ライ ン 要 的 に 幅 ン 高 さ が 計算 され ます 。 
素 で は 、width height と も に 指定 する 
こと が で きま せん 。 
幅 / 高 さと も に 、 長 さ を 表す 値 (10px 
な ど ) か 、 パ ー セ ント で 指定 し ます 。 
パー セン ト で 指定 し た 場合 、 親 要素 の 幅 
グ 高 さ に 対す る 割合 を 指定 し た こと に な り 
ます 。 た だ し 、 置 換 イ ン ラ イン 要素 で は 、 
その 要素 自身 の 幅 ン 高 さ に 対す る 割合 に な 
り ま す 。 


| リン フル ンー ス | フラ ウホ 
< く !DOCTYPE htmt> 

<htmt tang=!a"> 

<head> 

<meta charset=Wutf-8> 

<titUe> ボ ックス の 幅 と 高 さ </tttLe> 
<styLe> 

p { width: 399px: he1ght: 69px: 
background-cotor: coratli +} 

</Styte> 

</head> 

<body> 

<p> お 前 の 流し た 涙 を 受け る ボッ クス </p> 
</body> 

< く /htmt> 


表 
志 
と 
配 
置 
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@@ ee@O@ 


C 

に 】 に 

8 ボッ クス の 内 側 の 余白 を 指定 する 

ロ 

上 padding: 電 : 

り padding-top: 坦 : 

ラ padding-Ueft: 坦 : 

レ padding-right: 旬 : 

ス padding-bottom: 島 : @ 余白 の 数 値 
EE だ を 生得 すべ て の 要素 


ジア 

padding-top な どの padding 系 の プ 指定 する 値 は 、 長 さ を 表す 値 (10px な 

パテ ィ は 、div 要 素 な ど で 作 られ る ボッ ど ) や 、 パ ー セ ント で す 。 パーセント を 指 

クス の 内 側 の 余白 を 指定 する プロ パテ ィ 定 し た 場合 は 、 その ボッ クス を 含 お ボッ ク 

で す 。 ス の 幅 や 高 さ に 対す る 割合 を 表し ます 。 
[-top」 [-bottom」 [-left」 「-right] が 

な い padding プ ロ パ ティ は 、4 方 向 の 余 

白 を まとめ て 指定 し = 三 

ます 。 値 が 1 つの 時 値 が 5 つの 時 値 が 3 つの 時 値 が 4 つの 時 
値 は ひと つか ら 4 


1 1 1 1 
つ 指 定 す る こと が で 
き 、 値 の 数 と 奈 白 の | + 2 2 2 4 2 
1 1 3 3 


方 向 の 関係 は 、 右 の 
と お り で す 。 


※ 枠 の 周り の 番号 は 指定 し た 数 値 の 順序 に 対応 し ます 。 


へ 


<!DOCTYPE htmL> 
<htmL Lang="]a"> 
<head> C>< つ 


貞 が で > か く 
輸 な っ モリ し ませ し 


<meta charset="utf-8 リ > 

<titte> ボ ックス の 内 側 の 余白 </titLe> 
く styLte> 

p { border: 3px dotted cr1msoni 
background-cotor: bsquei dispLay: 1ntine- 
btock: } 

.p1 { padding: 19px) } 

.P2 { padding: 29px 19px 39pxj } 
EK/styte> 

</head> 

<body> 箕 球 委 

<p cuLass="p1"> 小 さく な っ た り </p> 

<p ctass="p2"> 大 きく な っ た り </p> 
</body> 

</htmt> 


Mi 
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@e@eee@Os@ ぁ 


ボッ クス の 外側 の 余白 を 指定 する 


marg1n: 

| marg1n-top: 坦 : 
|」margin-Left: 坦 : 

| marg1n-rght: 坦 : 
。 margin-bottom: 電 : 


@ … 放 白 の 数 値 


EE だ を 生得 すべ て の 要素 


margin-top な どの margin 系 の プロ パ 
ティ は 、div 要 素 な ど で 作ら れる 枠 の 周辺 
の 奈 白 を 指定 する プロ パテ ィ で す 。 
「-top」 「-bottom」 「-left」 「-right」 が 
な い margin プロ パテ ィ は 、4 方 向 の 余白 
を まとめ て 指定 し ます 。 値 は ひと つか ら 4 


の 幅 や 高 さ に 対す る 割合 を 表し ます 。 

また 、margin 系 の プロ パテ ィ で は 、 値 
と し て auto を 指定 する こと が で きま す 。 
ブロ ッ ク コ ン テ ナ 要素 に 対し て 幅 を 指定 す 
る と 同時 に 、margin-left・margin-right 
プロ パテ ィ に auto を 指定 する と 、 セ ンタ 


つ 指 定 す る こと が で き 、 値 の 数 と 余白 の 方 


リン グ さ れ 


ます 。 


向 の 関係 は 、padding プ ロ 


パテ ィ と 同じ 


一 方 、margin-top/margin-bottom 


Ao 

指定 する 値 は 、 長 さ を 表す 値 (10px な 
ど ご) や 、 パ ー セ ント で す 。 パ ー セ ント を 指 
定 し た 場合 は 、 そ の ボッ クス を 含む お ボッ ク 


ロ パ ティ に auto を 指定 


2 
定 し た の と 同じ に な り ま す 。 


する と 、0 を 指 


< く !DOCTYPE html> 

<htmt Lang=! け a"> 

<head>EE 問 肖 

く styLe> 

body{ margin: 9j padding: の: + 


p { borders 
299pxj background-coLor: #ccffffi 
・m1 { marg1in: 20px 49pxj } 

・m2 { margin: 9 autoj } 
Ei: 計 /styte> 

</head> 

く body> 

<p class="m1'> 野 慕 な こと 言わ ず に </p> 

<p class="m2"> ス マー ト に 飲み みた いね </p> 
< く /body> 

く /htmt> 


3px dotted btLack: width: 
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ロロ の の O 


に 
と 3 


AS に NN トーE で | 


表 
武 
a 
配 
置 


@@e@O す 9 


5 

8 ボッ クス の 配置 方 法 を 指定 する 
バ 開 

1 に 4| pos1tion: 人 

? @ … 配置 方 法 を 指定 する キー ワー ド 

2 

天 


EE が 皇 得 すべ て の 要素 


position プ ロ パ ティ は 、div 要 素 な ど  ・absolute 
で 作ら れる ボッ クス の 配置 方 法 を 指定 する 絶対 的 な 位置 に ボッ クス が 配置 され ま 
プロ パテ ィ で す 。 Position プ ロ パ ティ に す 。 対象 の 枠 を 含 お 親 の 枠 の posititon プ 
指定 する 値 に よっ て 、 以 下 の よ うに 配置 方 ロ パ ティ の 値 に よっ て 、 以 下 の よ うに 配置 


間 ※ の 湊 まり ます 。 され ます 。 
親 の 枠 が static 以 外 の 場合 一 

寺 ・static 親 の 枠 の 左上 が 基準 
示 通常 の レイ アウ ト の 流れ に 沿っ て ボッ ク 親 の 枠 が static の 場合 
本 識 ス が 配置 され ます 。left ノ right ン top ノ ブラ ウザ の 左上 が 量 準 
和議 bottom の 各 プ ロ パ ティ の 値 は 適用 され  ・fhxed 

ませ ん 。 ブラ ウザ の 左上 を 某 準 に 、 絶 対 的 な 位置 

・relative こ ボ ックス が 配置 され ます 。 画 面 を ス 

通 油 の 流れ に 沿っ て レイ アウ ト し た と き ロー ル し て も 、 そ の 要 索 は スク ロー ル せ ず 


の ボッ クス の 左上 を 基準 に 、 相 対 的 な 位置 に 位置 が 固定 され た まま に な り ま す 。 
こ ボ ックス が 配置 され ます 。 


サジ ツブ ルソー エス 
<!DOCTYPE html> ブラ ウザ 表示 
<htmt tang="a"> 
<head> 攻 国 当 <styLe> 
body { margin:9 の : padding: 9: height: 
599pxj background: yeLLowgreeni + 

fixbox { pos1tion: fixed: top: 199pxj Left: 


199pxj } き 色 い 独 が 
PD { margin: 59px 9 9j height: 199pxs D 申 っ の で は な い 
background: goldi } | Nl 時計 誠 人 
</styte> ] SL 
</head> 

く <body> 

<p> 皇帝 の お 言葉 </p> 


<div ctass="fixbox"><1mg src="S2194.png"' 
aLt=!W> く /d1V> 

</body> 

く /htmt> 
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2.2 5.1 


2eeeo を る 
ボッ クス の 配置 位置 を 指定 する 


top: 名 

Left: 夫 : 

rght: 免 : 

bottom: 幹 : 

人 で 位置 を 指定 する 数 値 も し く は auto 


適用 可能 な 要素 隊 :Aq の E: 


left ノ right ン top/bottom プ ロ パ ティ ト の 位置 を 、 基 準 の ボッ クス の 右 下 か ら の 


は 、 対 象 ボ ックス の 位置 を 、 基 準 の 位置 か 長 さ で 指定 し ます 。 


ら の 長 さ で 指定 する プロ パテ ィ で す 。 値 の これ ら の プロ パテ ィ に パー セン ト を 指定 
初期 値 は 、 位 置 を 指定 し て いな いこ と を 示 し た 場合 は 、 親 ボッ クス の 幅 や 高 さ に 対す 


す auto で す 。 る 割合 を 指定 し た こと に な り ま す 。 

これ ら の プロ パテ ィ は 、position プ 
パテ ィ が Sstatic 以 外 の と き に 利用 で きま 
す 。 

left プ top プロ パテ ィ で 、 対象 ボ ックス 
の 左上 の 位置 を 、 基 準 と な る ボッ クス の 左 
上 か が から の 長 さ で 指定 し ます 。 ま た 、right 
bottom プ ロ パ ティ で 、 ボ ックス の 右 


<!DOCTYPE html> 


<htmL tang="]a"> 

<head> 葉 芝 当 

く styLe> 

body { margin: の 9j padding: 9: background: 
orangeredi + 

・absbox { pos1ton: absoLute: top: 199px: 
Lefti 190pxi } 

P { marg1in: 59px 9 9 59px: width: 159px: 
he1ght: 159px: background-cotor: seagreen: 
coLor: #Fff: + 

く /styte> 

</head> 

< く body> 

<div ctass=Wabsbox"><1mg src="S2195.png" att=""> く /dTv> 
<p>z プ レ ゼ ント を くれ っ </p> 

</body> 

</htmt> 


直人 人 が 9 7 ロー 
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ロロ NL の 0 の O 


ヽ ー 
と と 


ィ 
リ 
フ 
P 
レ 
ウ 
ス 


22 51 


G 
8 ボッ クス の 重ね 大 を 指定 する 
バ 記 “ 
? に z-jndex: 坦 : 
フ 開 旭 @ 重なり 順 を 示す 数 値 ち し く は auto 
ン 
ス 
CB に E 間 位 置 指定 され た 要素 


9 


複数 の 要素 を 位置 指定 する と 、 要素 同士 に 「 の め り こ め っ 」 が 表示 され て いる こと 
が 重なり 合う こと も あり ます 。 が わか り ま す 。 

その 場合 に は 、z-index プロ パテ ィ で 要 
素 の 重なる 順序 を 指定 する こと が で きま 
す 。 値 と し て 整数 を 指定 し ます 。 初期 値 は 
auto で す 。 

値 が 大 きい ほど 、 他 の 要素 より 上 に 重 な 
り ま す 。 

サン プル で は 、「 で 一 る ぞ っ 」 の div 要 素 、 
「 の め り こ め っ 」 の div 要 素 、 イ ラス ト が 
入っ て いる div 要 素 の それ ぞ れ の 重なり 順 
を 「2]「1] [3] に 指定 し て いま す 。 その 
た め 、 ブ ラウ ザ で 表示 し た と き に 、 イ ラス 
ト が 一 番 上 、 次 に 「 で 一 る ぞ っ 」、 一 


<ipocTyPE 問題 

<htmL tang="ja"><head> 葉 旋 <styte> 
div { height: 199pxj pos1tion: absoLutej text-aLign: r1ghtj 

-d1 { z-index: 2: width: 199pxj background: darkkhakt Left: 59pxj top: 59pxi } 
.d2 { z-jndex: 1 width: 299pxj background: oLivedrabj Left: 89pxj top: 89pxj + 
.d3 { z-index: 3 background: khak1 Left: 129pxj top: 139px) } 
</styte></head><body> 

<div class="d1"> で 一 る ぞ っ </div> 

<div cuass="d2"> の め り こ め っ </div> 

<div ctLass="d3"><1mg src="S2196.png"' alt= ウ > く /d1V> 

</body> 

</htmt> 
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9eweo#a 
ボッ クス の 回 り 込 み を 指定 する 


float: 坦 : 
@ ボッ クス を 寄せ る 方 向 を 示す キー ワー ド 


AN で NN ビュ リロ NN の の の 


| 
で て の 時 


HU RUI ジ 


float プ ロ パ ティ は 、 ボ ックス を 現在 の 後 の 要素 は 影響 を 受け て レイ アウ ト さ れ 
の 行 の 左端 また は 右端 に 寄せ る 際 に 使い ます 。 通常 の コン テン ツ は 、 フ ロー ト し て 


ます 。 いる コン テン ツ を よ け る よう に 配置 され ま 
指定 で きる キー ワー ド は 以下 の と お り で す 。 
す 。 た だ し 、 紀 AD 軒 指 定 され て いる 可 索 に 較 
ee 上 は 、float プ ロ パ ティ を 適用 する こと は で 
left… ポ ックス を 左 に 寄せ る 。 由 


・ right… ボ ックス を 右 に 寄せ る 
* none… ボ ックス を 左右 に 寄せ な い : 初 
期 値 


また 、float プロ パテ ィ の none 以 外 の 
値 が 指定 され て いる 要素 が 出現 する と 、 そ 


| <IDOCTYPE html> 

<htmt tang="]a"> 

| <head> 攻 半 当 

<styLe> 

div, p { padding: 19pxj background: gotdi + 
・fr { float: Fight: background: orangej 
pt background: tightcorati + 

</styte> 

</head><body> 

< く div ctass="frW><1mg src="S2197.png"' 
alLt=> く /d1V> 

<div> フ レン ド の 友達 は <br> 

みな フレ ンド だ <br> 

世界 に 広げ よう </div> 

<p> 輸 っ ! </p> 

</body> 

</htmt> 
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@G@@@O@ 


C 

き 8 ボッ クス の 回 り 込 み 解除 を 指定 する 
口 ーー 

バ 名 軒 

| ctear: の : 

? ⑯ 解除 する フロ ー ト の 方 向 を 示す キー ワー ド 

だ 

ス 


人 届 回 還 六 も < 姓 すべ て の 要素 


clear プロ パテ ィ は 、float プ ロ パ ティ の 指定 を し て いま す 。 その た め 、 ブ ラウ ザ 
で 作ら れる フロ ー ト の 状態 を 解除 し て 、 通 で 表示 し た と き に 、「 で きま し た 」 の 枠 が 、 
淀 の 流れ に 戻し ます 。 画像 の 入っ て いる 枠 の 下 に 表示 され ます 。 

指定 で きる 値 は 下記 の と お り で す 。 


*・ left… [float: left] の フロ ー ト を 解除 

* right… 「float: right] の フロ ー ト を 
解除 

s both… 「float: left」 と 「float: 
right」 の 両方 の フロ ー ト を 解除 

* none… フ ロー ト を 解除 し な い : 初期 値 


サン プル で は 、「 で きま し た 」 と いう テ 
F ェ スト が 入っ て いる bp 要 素 に 回 りこ み 解 除 


1 
表 
小 
と 
配 
置 


I ル 


く !DOCTYPE htm 
<htmt tang=! け a"> 
<head> 攻 国 

< く Sty Le> 

div { padding: 19px: background-cotor: Uightgreyj + 

.fr { float: rght: background-cotor: statebtuei + 

p { ctear: bothi padding: 19pxj background-coLor: tightpink: + 
く / sty te> 

< く /head> 

<body> 

<div ctass="frW><1mg src="S2198.png"' alt=W> く /d1V> 

<div> や り ま し ょ う </div> 

<p> で きま し た </p> 

</body> 

</htmt> 
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2eeeos ぁ 
ボッ クス か ら は み 出 た 内 容 の 表示 方 法 を 指定 する 


に | overflow: 人 
| | overflow-x: 埋 : 
、 | overflow-y: 旬 : 


便 フロー し た 内 容 の 表示 方 法 を 示す キー ワー ド 


EE 肌 交 まま < 短 井 置 換 ブ ロッ ク 要 素 ./ 非 置換 イン ライ ン ブ ロ ッ ク 要 素 


(エン ベ デ ッ ド ・ コ ン テ ン ツ 、type 属性 値 が image の input 要素 、area 要素 な ど に は 適用 で きま せん ) 


overflow プロ パテ ィ は 、 幅 や 高 さ を 指 overflow プロ パテ ィ は 、 縦 と 横 の それ 
定 し て いる ボッ クス の 内 容 が 、 ボ ックス か ぞ れ の 表示 方 法 を 別々 に 指定 する こと は で 
ら は み 出 し て し まう と き に 、 そ の 表示 方 法 きま せん が 、overflow-xoverflow-y 


を 指定 する プロ パテ ィ で す 。 
指定 で きる キー ワー ド は 以下 の と お り 
奄 表 。 


を 利用 すれ ば 別々 に 指定 で きま す 。 


overflow-x プロ リ 
ワー ド を 、 横 に は み H 


パテ ィ は 上 記 の キー 
H9 場 合 の 表示 方 法 と 


し て 指定 し ます 。 

また 、overflow-y プロ パテ ィ は 上 記 の 
キー ワー ド を 、 縦 に は み 出 す 場 合 の 表示 方 
法 と し て 指定 し ます 。 


*・ Visible… は み 出 し た 部 分 も その まま 表 
示す る : 初期 値 

* hidden… は み 出 し た 部 分 は 表示 し な い 

* SCroll… ス クロ ー ル バー で スク ロー ル し 
て 見 られ る よう に 表示 する 

*・ auto… ユ ー ザ ー エ ー ジ ェ ン ト に 依存 


MM ルル 記 以 
く !DOCTYPE htmt> 

<htmt tang="]a リ > 

<headz 攻 正当 <styLe> 

div { height: 59px: border: 1px soLid 
#999999 ぅ margtn: 9 9 19pxj text-aL1gn: 
centerj + 

img { vert1cat-atign: topi } 

・of-v { overflow: visibte: + 

・of-h { overflow: hidden: 1 

・of-a { overflow: autoz: } 

</styte></head> <body> 

<div ctass="'of-h">hidden <1mg src="S2109. 
png" att= 上 0 らく /d1v> 

<div ctass=Wof-a">auto <1mg Src=!"'S2109. 
| png" att=VW></div> 

<div ctass="'of-vW>v1s1bte <1mg src="'S2109 . 
png"' at= 旧 らく /d1V> 


ブラ ウザ 表示 


_hidden 間 A 


| scroll 人 Es 
| の 」 リッ 


ョ ンダ 
っ ちる うーーーーー ゴ | 


</body></htmt> 
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ロ NIO の O 


ヽ ー 
と っ 


NAS に NNIーESI | 


表 
直 
中 
配 
置 


OL KJKUEJL) 


C 
S さ 1 
s ボッ クス の 切り 抜き を 指定 する 
口 MP 
バ 
フ : ロ 
り cUip: 島 : 
秒 ⑯ rect( 切 り 抜く 範囲 の 数 値 指定 ) ち し く は none 
レ 
ブツ 
ス 

絶対 位置 指定 (position: absolute:) され た 要素 

clip プ ロ パ ティ は 、 絶 対 位 置 指定 され た 

要素 の ボッ クス を 、 部 分 的 に 切り 抜く 働き || | 上 | トーーー- ボッ クス 

を し ます 。 | 

指定 で きる キー ワー ド は 以下 の と お り 
1 e3。 。 日 壮 粒 本 蘭 | 切り 抜く 領域 
表 ・ auto… 切 り 抜か な い : 初期 値 
中 較 ・rectO… 四 角 く 切り 抜く 
配 
置 


rect の 括弧 の 中 に は 、 上 ーー 右 一 下 一 左 
の 順に 、4 つ の 値 を コン マ で 区 切っ て 指定 4 つの 幅 は 、 長 さ を 表 す 値 が パーセント 
し ます 。 rect で は 、 切 り 抜く 範囲 の 左上 で 指定 し ます 。 パー セン ト の 場合 は 、 ボ ッ 
と 右 下 の 位置 を 、 ボ ックス の 左上 を 基準 と クス の 幅 や 高 さ に 対す る 割合 を 指定 し た こ 
し て 指定 する 形 に な り ま す 。 と に な り ま す 。 


<!DOCTYPE htmt> 
<htmt tang="]a リ > 

<head> 志 当 

<styLe> 

-c { position: absoLute: cLip: rect(409pX。 
139px, 150px。 9) j right: の j bottom: 9j + 
く /styte> 

く /head> 

< く body> 

<d1v><1mg src="S2119.png'' alt=""> く </d1V> 
<div ctass=WcW><1mg src="S2119.png' | 
at= リ らく /d1V> | 
<p> 右 が ctip プ ロ パ ティ 適用 状態 。</p> | 
</body> | 
</htmt> 


正体 ほ 
TW〒 ビ ん て す 


| 右 が clip プ ロ パテ ィ 剖 用 状態 
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@2eeeo#@ 
ボッ クス の 種類 を 指定 する 


disptay: 旬 : 
信 … 要素 の 表示 方 法 を 示す キー ワー ド 


AN で NN に ュ ゴ リロ ニ ロ の の 〇 


適用 可能 な 要素 座 : 愉 XYd の EE 


display プロ パテ ィ は 、 要 素 に よっ て 生 
成 され る ボッ クス の 種類 を 指定 する プロ パ 13ble-row-group… 


ティ で す 。 テー ブル の 行 グ ルー プ 
ピー ュー キト 、 ・ table-column-grouD… 
指定 で きる キー ワー ド は 以下 の と お り 
二 テー ブル の 列 グ ルー プ 上 
2 ・ table-row… テ ー ブ ル の 行 og 
・none… ボ ックス を 生成 し な い ・table-column… テ ー ブ ル の 列 還 
* inline… イ ン ラ イン : table-cell… テ ー ブ ル の セル 


s block… ブ ロッ クコ ン テ ナ 

*・ list-item… リ スト の 項目 (li 要素 ) 

* inline-block… イ ン ラ イン ブロ ッ ク ( 対 
象 の 要素 自身 は イン ライ ン 要 素 の よう 
に 振る 舞う も の の 、 要素 の 中 身 の レ イ 
アウ ト は ブロ ッ ク 要 素 と 同じ 方 法 で 行 


初期 値 は 要素 に よっ て 異な り ま す 。 


・ ラ ン イ ン ボ ックス 

特殊 な ボッ クス の ひと つと し て 「 ラ ン イ 
ン (run-in)] が め あり ます 。 ラ ン イ ン は 以 
下 の よ うな ボッ クス で す 。 


* Ii (1) 対象 の 要素 の 後に に 、 フ ロー ト や 絶対 配 
・ inline-table… イ ン ラ イン テー ブル ( 対 Ca ツウ Mu 
象 の 要素 自身 は イン ライ ン 要 素 の よう は 、 対 象 の 要素 の 内 容 は 、 後 続 要素 の 


に 振る 舞う も の の 、 要素 の 中 身 の レ イア 先頭 に イン ライ ン 要 素 と し て 描画 され 


ー 2 ます 。 
Np 2 (2)(1) の 条件 を 満た さ な い 場合 は 、 対 象 の 
テー ブル の キャ プシ ョ ン 要素 は ブロ ッ ク ボ ックス に な り ま す 。 
- table-header-group… な お 、IEZ と Firefox で は この 値 は サ 
テー ブル の ヘッ ダー グル ー プ ポー ト さ れ て いま せん 。 
*・ table-footer-grouD… 
テー ブル の フッ ター グル ー プ * table 系 の 半 


display プロ パテ ィ に table 系 の 値 を 指 


メ 5 う 


定 す る こと で 、 テ ー ブ ル 系 以外 の 要素 を 


ロロ NL の の O 


テー ブル の よう に 表示 する こと も で きま 
パ 水 ぁ 
テ サン プル で は 、「[ エ ル メ ス が 好き 」 と い 
り う テ キス ト の div 要 素 と イラ スト の 入っ 
ア て いる div 要 素 の ボッ クス の 種類 と し て 
レ [inline」 を 指定 し て いま す 。 その た め 、 
ス ブラ ウザ で 表示 し た と き に 、 必 た つの div 


要素 が 隣り 合っ て いる こと が わか り ま す 。 
また 、「 ヴ ィ ト ン も 」 「 デ ィ オ ー ル も 」 と 
いう テキ スト を 含む div 要 素 の ボッ クス の 
種類 と し て 「inline-block」 を 指定 し て 
いま す 。 その た め 、 ブ ラウ ザ で 表示 し た と 
き に 、 そ の 部 分 が 「 あ と 」 「 好 きよ 」 と い 
う テ キス ト の 横 に 並び 、「 ヴ ィ ト ン も 」「 デ ィ 
オー ル も 」 は 縦 に 並 太 こ と が わか り ま す 。 


ュー さ 


宮 
り 
と 
配 
置 


PPP024m の 人 
く !DOCTYPE htmt> 
<htmt tang="a"><head> 葉 沖 <styUe> 

・d-1 { dispLayi 1nLinej coLor: orangei } 

.d-ib { disptay: nuine-bLockj cotor: darkgotdenrodi } 
img { verttcal-auign: middtei + 

</ styLe></head><body> 

<d1v> 

<div ctass="d-1"> エ ル メ ス も 好き よ </div> 

<div ctass="d-1"><1mg src="S2111.png!' alt=W></d1v> 

< く /d1V> 

<div> あ と 

<div ctass="Wd-1b リ > 
<div> ヴ ィ ト ン も </div> 


<div> デ ィ オ ー ル も </div> うす が 才 ま き な の よ 
く /d1V> 

ao 

</body> 者 4 


</htmt> エル メス が 好き AD ・ 4 典 


必 
ぐ 


ヴィ トン も 
あと ディ オー ル も 好き よ 


inline-block ] 
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5.1 


@G@@@0『@ 


C 

で る | 3 ら 

文字 が 並ぶ 方 向 を 指定 する は 

ー ロ 

昌 バ 

1 ミ テ 

directon: 坦 : 

un1code-b1d1: 全 : ラ 

⑯ … テキ スト と イン ライ ン 要 素 が 並ぶ 方 向 を 示す キー ワー ド め 

信 … 文字 が 並ぶ 方 向 を 変更 する か どう か 示す キー ワー ド ス 
すべ て の 要素 


direction プロ パテ ィ は 、 要 素 内 の テキ 
スト と イン ライ ン 要 素 が 並ぶ 方 向 を 指定 し 


・ normal… 通 常 通り の 表示 : 初期 値 
・ embed… 対 象 の 要素 が イン ライ ン 要 素 


時 の と きのみ 、 文 字 方 向 の 指定 を 追加 し 
電 定 で きる キー ワー ド は 以下 の と お り で ます, 方 各 は direction プ ロバ ティ で 指 
EE 定 し ます 。 表 
・ Itr… 左 か ら 右 の 方 向 を 指定 : 初期 人 ・ bidi-override… 対 象 の 要素 が イン ライ 議員 
< rtL… 右 か ら 左 の 方 向 を 指定 ン 要 素 で ある 場合 は 、 文 字 方 向 の 指定 本 
を 上 書き し ます 。 ま た 、 対 象 の 要素 が 上 識 菩 
unicode-Dbid パテ ィ は 、 字 の 方 ブロ ッ ク コ ン テ ナ で あれ ば 、 その 要素 
向 を 指定 し た り 、 本 来 の 方 向 を 上 書き し 庄 内 に ある イ ン ラ イ ン 要 素 の 文字 方 向 を 
つ す る 際 に 使い ます 。 上 書き し ます 。 方 向 は direction ブ プロパ 
指定 で きる キー ワー ド は 以下 の と お り で ティ で 指定 し ます 。 


す 。 


く !DOCTYPE htmt> 
<htmL tang=!a"> 

<head> 

<meta charset=Wutf-8 リ > 
<titte> 文 字 が 並ぶ 方 向 </titte> 

< く styte> 

・d1 { direction: Ltrj background: 
Seagreenj 

・d2 { directton: rtLi unicode-bidi: bidi- 
overridej background: red: } 

記 員 /styLe> 

く </head> 

く <body> 

<p clLass="d1"> ラ イダ ー キ ッ ク </p> 

<p class="d2"> ラ イダ ー キ ッ ク </p> 

</body> 

</htmt> 


2 


@eleleo き る 


C 

8 ボッ クス の 表示 ・ 非 表示 を 指定 する 

A 
導 visib1uity: 候 : 

タ ⑯ 表示 ・ 非 表示 を 示す キー ワー ド 

ン 

ス 


EEIL3C ま < 揚 すべ て の 要素 


visibility プロ パテ ィ は 、 ボ ックス の 表 ウザ で 表示 し た と き に 、 そ の 部 分 が 1 文字 
示 ・ 非 表示 を 指定 する プロ パテ ィ で す 。 分 空白 に な っ て いる こと が わか が り ま す 。 
早 定 で きる キー ワー ド は 以下 の と お り で 
す 。 


*・ Visible… 表 示す る : 初期 値 
・ hidden… 非 表示 に する 


Visibilty プロ パテ ィ で 非 表 示 に し て も 、 | 人 
ボッ クス は 配置 され て いる た め 、 そ の 部 分 1 
に は スペ ー ス が で きま す 。 

サン プル で は 、「 ル ] と いう テキ スト を 
非 表示 に 指定 し て いま す 。 その た め 、 ブ ラ 


下 の 文 章 の 空 曲 に 共通 する カタ カナ を 答え な さい 。 
すべ て は オー "で 、 手紙 は メー\、 


表 
起 
と 
配 
置 


<!DOCTYPE html> 4 2 
atm tangr'Ja ーー テー 
<head>E 呈 肖 そし て 、 お れ が ルー 。 だ 。 

<styLe> 
span { vis1b1Lity: hiddeni + 
| 中 略す 39A N 、 


</head> 

<body> 世 店 当 

<p> 下 の 文章 の 空白 に 共通 する カタ カナ を 答え な さい 。 <br> 

| すべ て は オー<span> ル </span> で 、 手 紙 は メー<span> ル </ span>、 く br> 
指 パ ッ チ ン は ポー<span> ル </span> だ 。<br> 

そし て 、 お れ が ルー<span> ル </ span> だ 。</p> 

</body> 

| く </htmLt> 
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7 .2 5.1 


2lele eo る 


C 
行内 の テキ スト や 要素 の 終 の 揃え を 指定 する 
バ 
vertcat-atign: 鍵 : 4 
⑯ … 上 下 の 表示 位置 示す キー ワー ド 間 
| イン ライ ン 要 素 お よび テー ブル セル 要素 


VeniEacalign フロ パテ ィ は 、 イ ン ラ イン ・ text-top… 親 要素 の フォ ント の 上 端 
要 索 お よび テー ブル セル 要素 (htd 要 txt.bottom.… 索 の フォ ント の 下 映 
素 ) の 、 縦 方 向 の 配置 を 指定 し ます 。 指定 ,*_ セ ン ト … 親 要素 の ペー スラ イン を 時 


| 
印 


で さる キー ワー ド は 以下 の と お り で す 。 準 に 、 ine-height ブ ロバ ティ の 高 さ に 革 
、- ユ ニレ 、. パー セン ト を 掛け た 値 だ け 上 下す る ( プ 
: baseline… 親 要素 の ベー スラ イン : 
0 ラス の 値 を 指定 する と 上 に 移動 ) 表 
- middle・… 親 要素 の ミド ル ラ イン " 長 さ … 親 要 索 の ペー スラ イン を 大 準 に 、 議 
・ top… 行 ポッ クス の 上 端 指定 し た 長 さ だ け 上 下す る 


・ bottom… 行 ボッ クス の 下端 

"Sub… 親 要素 の 下 付き 文字 の ベー スラ 
イン 

* SuDer… 親 要素 の 上 付き 文字 の ベー ス 
ライ ン 


テー ブル セル 要素 で は 、baseline、 
middle、top、bottom、 パ ー セ ント 、 
長 さ の み 指 定 で き 


| <!DOCTYPE htmt> 

| <htmt 1ang=" お al><head> 世 直 当 <styte> 
jp { font-size: 48pxj』 background: 
| orangered: Line-heght: 1 } 
| pzspan { font-size: 36px: background: 
| gotdi} 


| p>span>span { font-s1ze: 12pxj background: | mo 
btLackj cotor: whitez + | baseiinal | 


・V~t { verticat-atign: topi + 
| ・V-b { verticat-atign: bottomz } 
| 世 沿 :/styte></head><body> 計 当 ra 
| <p> 辛 <span> い ! <span>basetine</span></ 
Span> く /p> 
| <p> う ま <span> い ! <span ctass="V- て ">top</span> く /span> く /D> 

<p> も う <span> 一 本 ! <span ctass="v-b>bottom</span> く / SDan> く </p> 
く /body> 

< く /htmt> 
| 


\ 
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2.2 5.1 


See@O$@ 


C 

s 輪郭 線 ( ア ウト ライ ン ) の 大 さ を 指 定 す 

記 6 0 iR 3GG2 和 3 NNN 
| outtine-width: 坦 : 

タ ⑯ 輪郭 線 の 太 さ を 示す 数 値 

ツジ ツ 

ス 


適用 可能 な 要素 :MAXOE: そ 3 


outline-width プロ パテ ィ は 、 輸 郭 線 が 、outline プ ロ パ ティ は 線 を 引 し て も 要 
の 幅 を 指定 する プロ パテ ィ で す 。border- 素 の 大 き さ が 変化 は けず 、 レ イア ウト も 変わ 
width プ ロ パ ティ と 同じ 値 を 指定 する こ ら な いと いう 違い が あり ます 。 

と が で きま す 。 

outline 系 の プロ パテ ィ は 、 有 要素 の 周囲 
に 線 を 引く プロ パテ ィ で す 。border プ 
パテ ィ と 似 て いま す が 、 基本 的 に は 入力 系 
要素 (input 要素 な ど ) で 、 フ ォ ー カ ス 等 
の 状態 を わか りや すく 表示 する 際 に 使い 
ます 。 

border プロ パテ ィ は 線 の 太 さ の 分 、 要 
素 が 大 きく な り レ イア ウト に 影響 し ます 


ト つ う 
ト う 


イ 
ン 
1 
フ 
エ 
の 
ス 


<!DOCTYPE htmL> 


<htmt tang="]a"> 


<head> | | = | 
<meta charset=Wutf-8 リ > 
<tittue> 輪 郭 線 ( ア ウト ライ ン ) の 内 側 の 余白 </titUe> 


<styLe> 『 
1nput:focus { outLine-width: 5px: outLine-styte: soLid: outLine-cotor: greehj + 


ー 


く /'styLe> 
</head> 
<body> 
<p> く 1nput type=" モ ex て name=" モ xt1" vatue="> く /p> ] 
</body> 
< く /htmt> 


258 ら 柏 線 の 太 さき を 指定 する (P.222) 


5.1 


@@ @e@0# とう 
輪郭 線 (アウ トラ イン ) の 種類 を 指定 する 


outtjine-styLe: 夫 : 
借 輪郭 線 の 種類 を 指定 する キー ワー ド 


AN で NN に ヘリ ニニ ロ NL の の の 


し 適用 可能 な 要素 :ASrd の EE 


outline-style プロ パテ ィ は 、 輪 郭 線 の 
種類 を 指定 する プロ パテ ィ で す 。 

border-style プロ パテ ィ と 同じ 値 を 指 
定 す る こと が で きま す 。 

サン プル で は 、 イ ラス ト の 下 の テ キス ト 
ボッ クス に フォ ー カ ス が あたっ た と き ア ウ 
トラ イン の 種類 が 「double] と な る 指定 
を し て いま す 。 その た め 、 ブ ラウ ザ で 表示 


0 
MA 
1 
フ 
直 
条 
ス 


し た と き に 、 テ キス ト ボ ックス を クリ ッ 
する と 二 重 線 が 表示 され る こと が わか り ま 
す 。 


く !DOCTYPE htmt> 
<htmt tang="a"> 


| <head> N 

| く <meta charset="Wutf-8!> 
<titte> 輪 郭 線 (アウ トラ イン ) の 種類 </t1tte> 
< く styte> 当 間 


1nputifocus { outLine-styLe: doubtei outLine-width: 5pxj outLine-coLor: greeni 
抽 EK/styUe> 

</head> 

く body> 

<p><1nput type="text" name="tx て 1 vaLue=!W> く /p> 

| </body> 

</htmt> 


連 5 
ら の 枠 線 の 種類 を 指定 する (P.223) 5 259 


8elelelolW@ 


W 

8 輪郭 線 ( ア ウト ライ ン ) の 色 を 指定 する 

了 が 国 ーー ニー 本 に ES トー ーー ) 
導 5 outLine-cotor: 電 : 

タ |  @ ・ 較 部 線 の 色 を 指定 する 数 値 も し く は カラ ー ネ ー ム も し く は invert 

ン 

ス 


2 を 主 竹 すべ て の 要素 


outline-color プ ロ パ ティ は 、 輪 郭 線 を し て いま す 。 その た め 、 ブ ラウ ザ で 表示 
の 色 を 指定 する プロ パテ ィ で す 。 border- し た と き に 、 テ キス ト ボ ックス を クリ ッ ク 
color プロ パテ ィ と 同じ 値 を 指定 する こと する と は が ね 色 の 線 が 表示 され る こと が わ 
が で きま す 。 か り ま す 。 
初期 値 は invert で す 。 こ の invert と い 
う 値 を 指定 する こと で 、 背 景 を 反転 し た 色 
を 表示 する こと が で きま す 。 
た だ し 、 本 書 執筆 時 に お いて 、invert で 
輪郭 線 の 色 が 背景 を 反転 し た 色 に な る の は 
IE8 以 上 、Firefox、Opera の み で し た 。 
サン プル で は 、 イ ラス ト の 下 の テ キス ト 
ボッ クス に フォ ー カ ス が あたっ た と き ア ウ 
トラ イン の 色 が 「steelblue] と な る 指定 
<!DOCTYPE html> | PH は は きき | 
<htmt tang="]a"> | 
<head> 
<meta charset=!utf-8!> 
<titte> 輪 郭 線 ( ア ウト ライ ン ) の 色 </titLe> EiEm5 FcGBiEEREEHERSRTHEHRG7HHRORRR 
く styLe> 
input:focus { outuine-coLor: steelbtuej outLine-width: 5pxj outUine-stylei dottedi + 
Ei:/styte> | 
</head> 
< く body> 
EE 
<p><1nput て ype=" モ ext" name=!" モ tx モ 1" vaLue="> く /Dp> 


く /body> 
く /htmLt> 


イ 
ン 
1 
ワ 
出 
着 
ス 


8 


3 関連 
260 で ) 人 析 の 色 を 指定 する (P.224) 


|@⑥@@0 生 @ 


C 
輪郭 線 (アウ トラ イン ) の 内 側 の 余白 を 指定 する $ 
ロ 
バ 
outtine-offset: 電 : 4 
⑯ … 輪 線 と 要素 の 間 の 長 さ を 示す 数 値 タ 
ー ス 
軸 HH すべ て の 要素 | 


outline-offsSet プ ロ パ ティ は 、 輸 郭 線 _ トラ イン の 内 側 の 余 が 「5pxl と な る 指 
と 要素 の 間 の 長 さ を 指定 する プロ パテ ィ で 定 を し て いま す 。 その た め 、 ブ ラウ ザ で 表 


す 。 示し た と き に 、 テ キス ト ボ ックス を クリ ッ 
値 は 長 さ を 表す 値 を 指定 し ます 。 初期 値 、 ク す る と アウ トラ イン の 内 側 に こ 余白 が 表示 
は 0 で す 。 され る こと が わか り ま す 。 


値 が 0 の 場合 、 輪 郭 線 が 析 線 の すぐ 外側 
に 表示 され ます 。 3 

また 、 値 が 0 以上 で あれ ば 輪郭 線 が 桁 線 | 人 TAN3 7 
か ら 外 側 に 離れ て 表示 され 、0 以 下 で あれ 
ば 枠 線 の 上 も し く は 内 側 に 輪郭 販 が 表示 さ | 
れ ま す 。 

サン プル で は 、 イ ラス ト の 下 の テキ スト | 
ボッ クス に フォ ー カ ス が あたっ た と き ア ウ 


イ 
ジン 
9 
| 
フ 
則 
0 
区 4 


ANDOGTVPE NT 間 


<htmt Lang="a"> | 
NH | に] に 量 


| <meta charset="utf-8 リ > | 

<titte> ア ウト ライ ン の オフ セッ ト </ttte> ) 加 還 還 HE 還 EE 
く styLe> 

input:focus { outtLine-offset: 5pxj outLine-w1dth: 5pxs outtine-styte: groovei 
| outtine-cotor: bsquei } 

中 94394V 

< く /head> 

く body> 

[EE 

| <p> く 1nput type="text!" name="txt1" VatLue=!> く /D> 

| </body> 

| </htmt> 


| | 
W 剛 8 / 
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ロロ NL の の O 


トー 
の の! 


Eo 
リ 
フ 
ア 
レ 
ジ 
ス 


| outtine: の 4 圏 : 


人 @ 輪郭 線 の 太 さ を 示す 数 値 
人 る … 輪郭 線 の スタ イル を 指定 する キー ワー ド 
画 … 輪郭 線 の 色 を 指定 する 数 値 も し く は カラ ー ネ ー ム も し く は invert 


記紀 すべ て の 要素 


outline プロ パテ ィ は 、outline-width ます 。 
outline-style outline-color プロパ 
ティ を まとめ て 指定 し ます 。 

各 プ ロ パ ティ の 値 を スペ ー ス で 区 切っ て 


指定 し ます 。 値 を 指定 する 順序 は 自由 で す 。 

サン プル で は 、 イ ラス ト の 下 の テ キス ト 
ボッ クス に フォ ー カ ス が あたっ た と き 、 幅 
が 5px、 色 が 「gold」、 線 の 種類 は 実線 の 
アウ トラ イン が 表示 され る 指定 を し て いま 
す 。 その た め 、 ブ ラウ ザ で 表示 し た と き に 、 
テキ スト ボッ クス を クリ ッ ク す る と 指定 し 
た アウ トラ イン が 表示 され る こと が わか り 


<!DOCTYPE By 
<htmt tang="a"> 
<head> 1 


<meta charset=Wutf-8 リ "> 

<titte> 輪 郭 線 ( ア ウト ライ ン ) ス タイ ル の 一 括 指定 く /t1tLe> 
<styte> 

1nput:focus { outtuine: 5px soLid gold: + 


< く /'styte> 

</head> 

<body> 

< く p><]nput type="text!! name= リ "txt1" vaLue=!> く /p> 
| </body> 

く </htmL> 


、 
志 


262 関連 輪郭 線 (アウ トラ イン ) の 太 さ を 指定 する (P.258) 、 輪 郭 線 (アウ トラ イン ) の 種類 を 指定 する (P.259) 、 


輪郭 線 (アウ トラ イン ) の 色 を 指定 する (P.260) 


2.2 5.1 


@@e@O@ 


追加 する コン テン ツ を 指定 する 
content: 
| | @ eo 拓 
ET すべ て の 束 
SR 人 間 HE 0 の 


| 
| 
N 


content プ ロ パ ティ は 、::after<:before 
宮 似 要素 の 内 容 を 指定 する プロ パテ ィ で 
す 。 
指定 で きる 値 は 以下 の と お り で す 。 


* normal… 対 象 の 要素 擬似 要素 で の 一 
般 的 な 内 容 を 出力 : 初期 値 

・ none… 要 素 で あれ ば 、 そ の 要素 が 空 で 
ある か の よう に 、 子 要素 の 描画 を 禁止 
する 。 疑似 要素 で あれ ば 、 そ の 中 身 が 
空 で ある よう に する 

* 文字 列 … 指 定 され た 文字 列 を その まま 出 
カカ 

* Url( 画 像 の アド レス ) 画像 を 出力 


明 朋 COO6OHTOU 
| <!DOCTYPE htmt> 
| <htmt tang="a"> 
| <head> 
< く meta charset=W'utf-8 リ > 
<titte> 追 加 す る コン テン ツ の 指定 </ttLe> 
<styLe> 
Pibefore { content: urt(marker.png)】 } 
aiiafter { content: (attr(href) 5 } 
EK/stye> 
く /head> 
く body> 


</body> 
く /htmt> 


::before 擬似 要素 の 
content プロ パテ ィ 


中 申 ! 
<p> 明 智 光秀 <a href="http://goo.gL/kxTnAe">Googte 検 索 </a></p> 


: attr( 属 性 名 )… 対 象 要素 の 属性 の 値 を 
出力 ( 例 : attr(href と する と 、 href 
属性 の 値 を 出力 ) 


| 避 明 智 光秀 Google 給 索 (http//goo.gl/kxTnAe)「 
::after 擬似 要素 の 


content プロ パテ ィ 


【 


関連 
うふ) 要素 の 前 後 を 指定 する (P.181) 
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の 
ン 
1 
/ 
エ 
イ 
ス 


プ 


ロロ NL の の の 


に 
の | 


> ぐに ヽ 山 


> ぐに リロ NL の の の 


4 
1 
フ 
中 
イ 
4 


@ee@eO#@ 


カー ソル の 種類 を 指定 する 


cursor: 


介 カー ソル の 形状 を 示す 
キー ワー ド も し く は 画像 URL 


適用 可能 な 要素 


すべ て の 要素 


cursor プロ パテ ィ は 、 要 素 を マウ ス で 
指し 示し た と き の 、 マ ウス ポイ ンタ の 形 を 
指定 する プロ パテ ィ で す 。 指定 で きる キー 
ワー ド は 以下 の と お り で す 。 


AOR カー ソル 形状 


キー ワー ド 

wa1t ビジ ー 状 態 
Progress 進行 中 
hetp ヘル プ 


context-menu 


ー 
了 
る 

コン テキ スト メニ ュー Ma 
し 1 
| 
回 
ト 


auto 自動 的 に 決定 : 初 期 値 
vertical-text 縦 書 き テ キス ト 入 力 中 
crosshair 十字 型 ず の エイ リア ス ・ 
defautt 通常 の 形 K Ua ショ ー ト カッ ト 作 成 可能 
コピ ー 

po1nter リン ク NM 4 

移動 中 * no-drop ドロ ッ プ 禁止 
move 

サイ ズ 変 更 中 not-aLLowed 禁止 3 

〇 に は e/ne/n/nw/w/ 。 ーー も 
feSze Sw/s/sw/ew/ns/ co1-res1ze 列 幅 を 変更 中 中 

3 row-resize 。 行 の 高き を 変更 中 字 
text テキ スト 入力 中 I aUl-scroUL 全 方 向 スク ロー ル 可 能 。 避 


く !DOCTYPE htmt> 
<htmt tang="]a"> 
<head> 


<meta charset="Wutf-8 リ > 
<titLe> カ ー ソ ル の 種類 </t1tLe> 
く styLe> 


background: gotdj + 
< く /styte> 

</head> 

< く body> 


<p> 常 に マウ スポ イン タ の 形 を 変え る 機会 を うか が っ て 
いる </p> 
</body> 
< く /htmt> 


PD { cursor: pointerj padding: 19px 5Pxs | 


# 臣 を で 
に eb を 3 
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8 5 1 21 22* う 5.1 。 ※1 ベン ダー プレ フィ ックス (-moz-) が 必要 
紛 な を に 旬 「0 レコ ※2 5.0 ま で は ベン ダー プレ フィ ックス (-webkit-) が 必要 


ネ 3 2.x ま で は ベン ダー プレ フィ ックス (-webkit-) が 必要 


枠 の 幅 / 高 さ の エリ ア を 指定 する 


box-sizing: 島 : 
食 幅 / 高 さ の エリ ア を 示す キー ワー ド 


box-sizing プ ロ パ ティ は 、 ボ ックス の 
幅 / 高 さ を 算 出す る 方 法 を 変え る こと が で 
きる プロ パテ ィ で す 。 

指定 で きる キー ワー ド は 以下 の と お り 
で す 。 


。 border-box… ボ ポー ダー ボッ クス (ボー 


ダー+ バ ディ ング + コ ン テ ン ツ 部 分 ) で ーーーーーーーー 


幅 / 高 さ を 指定 


PP 


border-box 


padding-box 


Content-box 


た だ し 、 指定 で き 


* Padding-box… パ ディ ング ボッ クス padding-box は 削除 され 


( パ デ ィ ン グ + コ ン テ ン ツ 部 分 ) で 幅 ン 


ます 。 
高 さ 
記さ 生 指 則 _ 本 書 執 筆 時 点 で は 、Firefox の み 
: Content-box… コ ン テ ン ツ 部 分 で 幅 ン padding-box に 対応 し て いま す 
高 さ を 指定 : 初期 人 8 8 


る 値 の うち 、 
る 可能 性 が あり 


<!DOCTYPE htmt> 

<html tang="ja"><head>E 半 肖 
<style> 

p { width: 139pxj padding: 19pxj border: | 
19px soLid corati background: corns1iLki + 
| Ps-c { box-s1zing: content-box: -moz- | 
| box-s1zing: content-box』 

| .bs-p { box-sizing: padd1ng-box: -moz- 
| box-s1zing: padd1ng-box: } 

| ・bs-b { box-siz1ng: border-box: -moz-box 一 
Ss1z1ngi border-boxj 

| 計 K/styte> 

</head><body>E 済 当 

<p ctLass="bs-b">border-box く </p> 

<p ctass=!bs-p">padding-box</p> 

<p ctass="bs-c"'>content-box く /p> 

</body> | 
く /htmLt> 1 


亀谷 


1 


が な い の に 


きま 3 艇 違い 
し そい 3 


ロ !0 の 0 の O 


ヽ ー 
の 


> で へ に ふ 由 


イ 
ン 
1 
フ 
4 
イ 
スズ 


AN で NN に ュ ゴ | ニ ロ NL の の の 


イ 
ン 
タタ 
| 
フウ 
bl 
イ 
スズ 


人 @@O 


要素 の 大 き さ を 変更 で きる よう に する 


resize: 吉 : 


N 


@ 要素 の サイ スズ が 変更 可能 か を 示す キー ワー ド 


resize プロ パテ ィ は 、 要 素 の サイ ズ を 
変更 可能 に する か どう か を 、 指 定 す る プロ 
パテ ィ で す 。 

指定 で きる キー ワー ド は 以下 の と お り 
で 。 


: none… サ イズ 変更 不可 : 初期 値 

・ both… 幅 プ 高 さ の 両方 を サイ ズ 変 更 可 
能 

・ horizontal… 幅 を サイ ズ 変 更 可能 

*・ vertical… 高 さ を サ イズ 変更 可能 


| <!DOCTYPE html> 

| <htmL tang="]a"> 
<head> 癌 当 

<sty Le> 

| overflow-y: scroLt: marg1n: 19px autoi + 
| E 加 衣 /styte> 

</head> 

< く body> 


| お く と 、 ユ ー ザ ー に と っ て 読み や すい で す 。 攻 証 :/p> 
</body> 
く /htmt> 


苦 素 の 内 容 が 多く て 、 要 素 の ボッ クス 
か ら は み 出 す 場 合 、 要 素 の サイ ズ を ユ 
ー ザ ー が 変更 で きる よう に し て お く 
| と 、 ユ ー ザ ー に と っ て 読み や すい で 


|p { res1ize: verticati width : 399pxj height: 


199pxj border: 1px soLid #9999993 | 


く p> 
| 要素 の 内 容 が 多く て 、 要 素 の ボッ クス か ら は み 出 す 場 合 、 要 素 の サイ ズ を ユー ザー が 変更 で きる よう に し て 
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に 9! 


2eeeos@ 
領域 を 超え た テキ スト の 処理 を 指定 する 


ロロ NL の O の O 


ーー ー、 


に 
と 


、text-overflow: 坦 : 


今 … 領域 を 超え た テキ スト の 表示 方 法 を 示す キー ワー ド 


AN で ぐ へ に ヽ 由 


| 
| 
| 
| 
則 


| 電 計 ま 計 旨 ブロ ッ ク コ ン テ ナ 
いい 


text-overfltow プロ パテ ィ は 、 対 象 の な お 、 文 字 列 の 指定 に 対応 し て いる の は 
要素 か ら 1 行 の テキ スト 等 が は み 出 す 場 合 Firefox の み で す 。 
に 、 は み 出 し た 部 分 の 表示 方 法 を 指定 する 
ジロ リル (デイ で す 。 


・ clip… ボ ックス の 端 で 切り 取る (従来 
通り の 表示 ) : 初期 値 

*・ ellipsis… は み 出 し た 部 分 の 代わ り に 、 
「.…」 等 の 文字 を 表示 する (表示 され る 
文字 は 、 言 語 等 に 応じ て 変わ る 場合 も 
ある ) 

・ 文字 列 … は み 出 し た 部 分 の 代わ り に 、 指 
定 し た 文字 列 を 表示 する 


部 地 に か いた 
学 線 も あず 3 


MM 
ジ 
タ 

I 
フ 
中 
イ 
4 


| IABCDEFGHJKLMNOPQRSTUVWXY…| ト 
く !DOCTYPE htmL> 
<htmt tang="]a"> 
<head> 

<meta charset=Wutf-8> 
<titte> 領 域 を 超え た テキ スト の 処理 </t1tLe> ST IEEE 


【 


< く styLe> 

Pp { text-overflow: eLLtips1sj width: 399px: heght: 29pxj border: 1px sotid 
| #999999 overflow: hiddeni } 

旧 中 略 | 

| </ sty Le> 

</head> 

| <body> 

< く p>ABCDEFGHTJKLMNOPQRSTUVWXYZABCDEFGHTJKLMNOPORSTUVWXYZ</p> 
</body> 

く /htmt> 
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*1 を 2.2*1 5.1*1 


10 | 1 *2 | *1 1 

ら @ @ @ OO 各 の シラ クス (eb 必要 
ラ 旧 定 す る 

カラ ム の 数 を 指 


coLumn-count: 埋 : 
休 カラ ム の 数 を 指定 する 数 値 も し く は auto 


C 
に ) 
S 
ブ 
品 
パ 
の 
Pe 
リ 
フ 
アァ 
レ 
ン 
ス 


\ 


column-count プ ロ パ ティ は 、 カ ラム され る こと が わか り ま す 。 
の 数 を 指定 し ます 。 

値 に auto を 指定 する と 、 他 の プロ パテ ィ 
(column-width プ ロ パ ティ な ど ) に 応じ 
て 幅 が 調節 され ます 。 

初期 値 は auto で す 。 

この column 系 の プロ パテ ィ を 利用 す 
る と 、 ひ と 続き の 文章 や 文書 を 区 切っ て レ 
イア ウト する こと な く 、 横 に 並べ る こと が 


で きま す 。 
サン プル で は 、 カ ラム 数 を 「3] に 指定 
し て いま す 。 その た め 、 ブ ラウ ザ で 表示 し | 0 
た と き に 、「 浮 風 に さそ われ て 」| か ら 始 ま 1 人 な が め て いた Pr 
一 R っ 寺 ーー お ら 、 ん が 一 人 娘 の 】 
る テキ スト が 3 つの カラ ム に 分 かれ て 表示 | 和 呈 に さそ ね わ 「 ア ラ 、 小 野 ッ ポ ちゃ ん を つ 
科 有 の の 旦那 、 い いと れ て 、 途 方 に 募 
EE ー ト ・ レ ー ス を ころ で お 会 いし れ た 顔 。 ト 
| まし た わ 」 | 
eih html> | 
<htmt tang="a"><head>E 吉 当 > 
| <styLe> 
WT { coLumn-count: 33』 -moz-cotumn-count: 33 -webk1t-coLumn-Count: 3j 
EE 記 : 衣 /style> 
</head><body>E 下 当 
<div id=Wcontaner"> 
<btockquote 攻 肖 : 昌 


<p><b> お 嬢 さん は ジャ ズ が お 好き </b></p> | 
<p> 浮 風 に さそ われ て 隅田 川 の ボー ト ・ レ ー ス を な が め て いた ら 、 巧 店:/p> 
| </btockquote> 

| </d1v> 

| </body> 

| </htmt> 
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1 22 5.1*1 


し 


ま 1 ベン ダー プレ フィ ックス (-webkit-) が 必要 
ネ 2 ペン ダー プレ フィ ックス (-moz-) が 必要 


の 幅 を 指定 する 


適用 可能 な 要素 
N 


coLumn-width: 坦 : 
価 - カラ ム の 幅 を 示す 数 値 


ブロ ッ ク コ ン テ ナ 、 テ ー ブ ル の セル 、 イ ン ラ イン ブロ ッ ク 


1 BI 


column-width プ 
の 幅 を 指定 し ます 。 


KK デザ 要 。 カラ 


また 、 値 に auto を 指定 する と 、 他 の プ 


て 幅 が 調節 され ます 。 


初期 値 は auto で す 。 


パテ ィ (column-count な ど ) に 応じ 


サン プル で は 、 カ ラム の 幅 を 「120pxj 
定 を し て いま す 。 その た め 、 ブ ラウ ザ 
で 表示 し た と き に 、「 ア メリ カ の テク ノ ク 
まる テキ スト が 複数 の 段 に 


に 指定 


ラシー」 か ら 始 


分 が か れ て 表示 され る こと が わか り ま す 。 


果 ッ プ 」 出征 03 
能 8 小 ツ 4 


<!DOCTYPE htmt> 


く styLe> 


| 129pxj + 
| 膨 遇 衣 /styte> 
| </head><body> 攻 当 


<btockquote 誠 加 : 折 


| </btockquote> 
| </d1v> 
</body> 

く /htmL> 


<diV 1d=Wcontainer> 


<htmt tang="ja"><head>E 症 当 


<p> ア メリ カ の テク ノ ク ラ シー (日 本 で は 最初 の 一 カカ 月 
| は 極度 に 問題 に され E 沖 : 衣 /p> 


アメ リカ の テク ノ ク ラ シ 
| 一 (日 本 で は 最初 の ー カ 
| 月 は 極度 に 問題 に され 次 
| の 一 力 月 に は 全く 忘れ ら 
| れ た ) は 、 生 産 技術 家 の 
| 社会 管理 を 提唱 する 。 


#conta1ner { cotumn-width: 129px: -moz-coLumn-wdth: 129pxj -webkit-coLumn-w1dth: 


ーー と うし た 歴史 理論 や 


社会 政策 諭 が 、 圧 倒 的 に 
盛り あふ れる 今日 の 現実 


問題 を 、 て ん で マス ター | 


出来 な いこ と は 、 今 更 説 
明 を 伺 つ まで も な い 。 
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ロロ NL の O の OO 


に 
し 


テ 
イ 
リ 
フ 
ア 
レ 
ン 
ス 


C 
8 
S 
プ 
ロ 
バ 
プ 
イ 
リ 
ラフ 
ア 
レ 
2 
レ 4 


*1 ミ 2.2*1 放 5.1*1 


ら @@%@0『9 


*1 ベン ダー プレ フィ ックス (-webkit-) が 必要 
*2 ベン ダー プレ フィ ックス (-moz-) が 必要 


カラ ム の スタ イル を 一 括 指 定 する 


cotumns: 坦 全 : 


@ カラ ム の 数 を 指定 する 数 値 も 
人 … カラ ム の 幅 を 示す 数 値 


し 週 用 名 能 な 要 二 底 w み 3 の: 


し く は auto 


columns プ ロ パ ティ は 、column- 
count プ ロ パ ティ と column-width プロ 
パテ ィ を まとめ て 指定 し ます 。 

段 の 数 は 、 レ イア ウト に 応じ て 少な く な 
る こと も あり ます 。 
また 、 段 の 幅 は 、 レ イア ウト に 応じ て 指 
定 し た 幅 よ り 広 く (狭く ) な る こと も あり 
ます 。 


サン プル で は 、 カ ラム 数 を 「2]、 カ ラ 
ム 幅 を 「120px」 に 指定 し て いま す 。 そ 


の た め 、 ブ ラウ ザ で 表示 し た と き に 、「 途 


回 HCS 


れる こと が わか り ま 


、 自 動車 が パン ク し た 。」 か ら 始ま る 
テキ スト が 複数 の カラ ム 
す 。 


こ 分 か れれ て 表示 ご 


く !DOCTYPE html> 
<htmt tang='a"><head> 葉 吉 当 
く styLe> 


葉 潮 : 角 </styte> 
</head><body> 攻 直 当 
<div id="conta1ner リ > 
| <btockquote 攻 還 : 伯 


も じ や も じ や に させ な が ら 葉 虹 清く /p> 
</bLockquote> 

く /d1v> 

</body> 

</htmt> 


<p> 途 中 で 、 自 動車 が パン ク し た 。 路 易 は 自分 の 毛髪 を 


#container { coUumns: 2 129pxj -moz-coLumns: 2 129px: -webkit-coLumns: 2 120px3 + 


途中 で 、 自 動車 が パン ク 


し た 。 路 易 は 自分 の 毛 開 
| を も じ や も じ や に させ な 
が ら 替 心 に 運 較 手 の 手 つ 
だ ひ を し て や つた 。 詩 人 


や お 嬢 さん や その お 母 さ 
ん た ち が 向 う で 鶴 眞 銭 を 
い ぢ くつ て ゐる の を と き 
どき 振り 向き な が ら 。 
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10 ネ 1 三 2.2*1 5.1*1 


の | @⑥ @ @⑥ 0 生 の 2 
カラ ム の 間隔 を 指定 する 


coLumn-gap: 坦 : 
価 … 段 の 間隔 を 指定 する 数 値 も し く は normal 


上 抽 貞和 まま: 得 Column 系 の プロ パテ ィ を 使用 する 要素 


Column-gaD プ ロ パ ティ は 、 段 の 間隔 サン プル で は 、 カラ ム の 間隔 を 「30pxj」 
を 指定 する プロ パテ ィ で す 。 長 さ を 表す 値 に 指定 を し て いま す 。 その た め 、 ブ ラウ ザ 
を 指定 し ます 。 初期 値 は auto で す 。 で 表示 し た と き に 、 カ ラム の 間隔 が 前 節 の 
また 、「normall を 指定 する と 、1em サン プル より も 広がっ て いる こと が わか り 
程度 の 幅 に な る こと が 期待 され ます (実際 ます 。 


遇 3 上 
く !DOCTYPE htmt> 
<html tang="ja"><head> 四 汗 当 

< く styLe> 

#contatner { coLumn-gap: 39pXj -moz-coLumn-gap: 30Dpxj -webk1t-cotumn-gap: 30DX: 
columns: 2 1209pxj -moz-coLumns: 2 129px: -webk1t-coLumns: 2 129pxi } 
E 汎 /styte> 

</head><body> 攻 下 当 

<div 1d=Wcontatner> 

<btockquote 器 久 

<p> い つ 見 で も 、 ズ ボン の ヒッ プ に 泥 が つい て いた 。 
[中略 34 

</bLockquote> 

</div> 

</body> 

く /htmt> 


| いつ 見 て も 、 ズ ボン の ヒ すっ ぱ ぽ 娘 らし い 楽 し さも 
ッ プ に た 泥 が つい て いた 。 味わわ ず 、 人 生 と いう 秋 | 
| そう し た あげ く の は て 、 か ら 、 ほ ん の 上 澄 う わ ず 
| 過労 と 栄養 失調 、 風 邪 か み を 飲ん だ だ け で 、 つ ま 
ら 肺 災 と 、 ト ント ン 拍 子 ら な く あ の 世 へ 行っ て し 
の うま い コ ー ス で 、 ろ く まっ た 。 
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*1 ミ 2.2*1 5.1*1 


0 | | *21 1 | 
SI @ 0 9 


カラ ム の 区 切り 線 の 色 を 指定 する 


cotumn-rute-cotor: 坦 : 


[ お に 明寺 : 竹 column 系 の プロ パテ ィ を 使用 する 要素 


M8H の 5 


@ 区 切り 線 の 色 を 指定 する 数 値 も し く は カラ ー ネ ー ム 


REN 


column-rule-color プロ パテ ィ は 、 段 
の 間 に 区 切り 線 を 表示 する 際 に 、 線 の 色 を 
指定 する プロ パテ ィ で す 。 

border-color プロ パテ ィ と 同じ 値 を 指 
定 す る こと が で きま す 。 

サン プル で は 、 カ ラム の 区 切り 線 の 色 を 
[tomato」 に 指定 を し て いま す 。 そ の た め 、 
ブラ ウザ で 表示 し た と き に 、 カ ラム と カラ 
ム の 間 に 赤 い 線 が 表示 され て いる こと が わ 
か り ま す 。 


< く !DOCTYPE html> 

<htmt tang="ja"><head> [中 略 ]<styte> 
#conta1ner 

cotumn-rute-cotor: tomato: 拒 正当 
cotumn-rute-width: 5px 寺 正当 
cotumn-rute-styLe: soUidj 拒 敵 
cotumns: 2 309px 聞 遇 : 午 


十 何 年 か 前 に た ド イツ の フ 
ァ ン ク 博 士 と いう カメ ラ 
マン 兼 映画 カン トク が 来 
| 朝 し て 、 日 本 側 で は 早川 


婁 洲 、 原 節子 主演 の 「 新 
し き 土 」 と や らい う 日 独 
テイ ケイ 映画 を つく っ 
た 。 


E 遇 : 衣 /styte> 
| </head><body> 攻 上 当 

<div id="container> 

<btockquote 攻 滞 : 昌 
| <p> 十 何 年 か 前 に ドイ ツ の ファ ンク 博士 と いう カメ ラマ ン 兼 映画 カン トク 5 正良 </p> 
| </bLockquote> 

く /d1V> 

< く /body> 

く /htmt> 


3 関連 
272 人称 の 色 を 指定 する (P224) 


*1 *1 | 22*1 5 


0 
8@@@ 


O 事 g 


.1 *1 


※1 ベン ダー プレ フィ ックス (-webkit-) が 必要 
\2 ベン ダー プレ フィ ックス (-moz-) が 必要 


カラ ム の 区 切り 線 の 種類 を 指定 する 


( に 32 生得 Column 系 の ブロ バテ ィ を 


cotumn-rute-styte: 埋 : 
坦 区 切り 線 の スタ イル を 指定 する キー ワー ド 


使用 する 要素 


Column-rule-style プ 
の 間 に 区 切り 線 を 表示 する 際 に 、 
を 指定 する プロ パテ ィ で す 。 


パテ ィ は 、 段 


線 の 種類 


border-style プ 


パテ ィ と 同じ 値 を 指 


定 す る こと が で きま す 。 


サン プル で は 、 カ ラム の 区 切り 線 の 種類 


を 「double」 に 指定 を し て い 


ド す 。 そ の 


た め 、 ブ ラウ ザ で 表示 し た と き に 、 カ ラム 
と カラ ム の 間 に 二 重 線 が 表示 され て いる こ 


と が わか が り ま す 。 


| ウイ フル ソリス 
く !DOCTYPE htmt> 
<htmt tang="]a"><head>E 滞 当 
<styLe> 

#conta1ner て 


coLumn-rute-width: 5pxj 剖 当 
columns: 2 129pxj 品 当 1 
EL 当 </styte> 
</head><body> 区 六 当 

<dv 1d="conta1ner!'> 
<bLockquote 馬 店 : 


| く /d1V> 

| </body> 
| </htmt> 
| 


間 


cotumn-rute-styte: doubtei 葉 当 
| couumn-rute-cotor: tomatoj 還 十 当 


| 「 こ ん ど は メタ ル の うん 
と い ゝ やつ を 出す ぞ 。 早 
く 出る ろ 。」 と 云 ひ まし た 
ら 、 柏 の 木 ども は は じ め 
| て さわ つと し まし た 。 
その と き 林 の 奥 の 方 
で 、 さ ら さ ら さ ら さら 音 


が し て 、 そ れ か ら 、 
「 の ろ づ き お ほん 、 の る 
づき お ほん 、 
お ほん 、 お ほん 、 
ご ぎの ご ぎの お ほん 、 
お ほん 、 お ほん 、」 


<p> 「 こ ん ど は メタ ル の うん と い ゝ や つ を 出す ぞ 。 早く 出ろ 。] 亜紀 </p> 


関連 
で 年 析 の 種類 を 指定 する (P.223) 
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*1 2.2*1 5.1*1 


10 1 *2 る 本 
1 oi | 半 議 ま 1 ペン ダー プレ フィ ックス (-webkit-) が 必要 
契 愛 に 1 レフ | *2 ベン ダー プレ フィ ックス (-moz-) が 必要 


慎 
N 
お 
図 
紀 
Ns 
第 
お 
El 
Rn 
可 
全 
qI 
1 


バ 

テ 

り cotumn-rute-width: 坦 : 
者 ⑯ 区 切り 線 の 太 さ を 示す 数 値 
レ 

ン 

ス 


FE あま 手間 COlumn 系 の プロ パテ ィ を 使用 する 要素 


column-rule-width プロ パテ ィ は 、 段 
切り 線 を 表示 する 際 に 、 幅 を 指定 
する プロ パテ ィ で す 。 

border-width プロ パテ ィ と 同じ 値 を 指 
定 す る こと が で きま す 。 

サン プル で は 、 カ ラム の 区 切り 線 の 幅 を 
「10px」 に 指定 を し て いま す 。 その た め 、 
ブラ ウザ で 表示 し た と き に 、 カ ラム と カラ 


ら 
瑞 
FI 
図 


ム の 間 に 10px の 線 が 表示 され て いる こと [ 
N | 
が わか り ま す 。 | 
| い 
| ほぼ ぐ さぼ さ 
<!DOCTYI m 
<htmt tang="ja><head> 葉 吉 肖 <styte> | 
#conta1ner | 窓 の 硝子 に 茹 の よう に ぼ ぽ な 町 や 村 や 停車 場 の 多く 
coUumn-rute-width: 10px 反 遇 3 | さぼ さ し た 頭 を 発せ か け 置 な っ て 来る の を 見 た 。 人 
cotumn-rute-cotor: tomato: 吾 当 | て 投 召し て いた り し た 。 置 が 沢山 に 路 を 通っ て い 
coLumn-rute-styUe: solid 志 正当 | 努 吉 の 妻 は 段々 賑やか 四 た 。 
cotumns: 2 129px 訪 汰 年 | 
Eh/style></head><body>E 半 当 


<div id=Vconta1ner!> し 
<btockquote 庄 結 : 折 

<p> 窓 の 硝子 に 乱 の よう に ぽ さ ぼ さ し た 頭 を 先 せ か け て 衝 腫 し て いた り し た 。 諾 正当 /p> 
</btockquote> 

く /d1V> 

く </body> 

く /htmt> 
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274 ね 】 析 線 の 太 き を 指定 する (P.222) 


*1 22*11 51*1 


@③@@w@0 症 @ 


※1 ベン ダー プレ フィ ックス (-webkit-) が 必要 
* ま 2 ベン ダー プレ フィ ックス (-moz-) が 必要 


cotumn-rute: 倫 A 圏 : 

・ 区 切り 線 の 色 を 指定 する 数 値 も し く は カラ ー ネ ー ム 
・ 区 切り 線 の スタ イル を 指定 する キー ワー ド 

弄 … 区 切り 線 の 太 さ を 示す 数 値 


| 
| 
| 
| 
じ 


た 避 遇 洲本: 碧 Column 系 の プロ パテ ィ を 使用 する 要素 


Column-rule プロ パテ ィ は 、column- 
rule-color/column-rule-style ノ 
column-rule-width の 3 つの プロ パテ ィ 
を まとめ て 指定 し ます 。 値 を 指定 する 順序 
よ 自 由 で す 。 

サン プル で は 、 色 が 「tomato」、 幅 が 
「5px」、 線 の 種類 が 「solid] の カラ ム の 
区 切り 線 を 指定 し て いま す 。 その た め 、 ブ 
ラウ ザ で 表示 し た と き に 、 カ ラム と カラ ム 
の 間 に 指 定 し た 区 切り 線 が 表示 され て いる 
こと が わか が り ま す 。 | 


で せ え 


| HH (| 
<!DOCTYPE htmt> | 
<htmt tang=]a"> 「 拾 う も ん け え 。 そ ん な 』「 そ う で ご ざり ます る 
<head> 征 当 | で け え 持 を 呑ん だ 財布 を | か 。 仕 方 が ご ざん せめ ぬ 。 
講 WWMM 1 | 捨 や 、 鈴 な ど 鳴ら し て ま | お 騒が せ 致 し まし て 麗 れ 
| Contanner | ご まさし ちゃ いね え や ます る 。 た め | 
| coLumn-rute: 5px tomato solidj 葉 計 当 トー の mm 
cotumns: 2 399pxjE 滞 : 抽 ぜ 」 す 」 | 
EK/styUe> | 
</head><body> 攻 革 当 1 ー 
<dtv 1d="container"> 識 記 
<btockquoteE 語 有 
| <p> 「 拾 う も ん け え 。 そ ん な で け え 星 を 呑ん だ 財布 を 拾 や E 半 : 仁 /p> 
</btockquote> 
く /d1v> 
</body> 
| </htmt> 
| 
| 
\ 
関連 カラ ム の 区 切り 線 の 色 を 指定 する (P.272) 、 カ ラム の 区 切り 線 の 種類 を 指定 する (P.273) 、 275 


カラ ム の 区 切り 線 の 幅 を 指定 する (P.274) 


口 NIOO の DO 


に 
ンー」 


デ 
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ス 


ロロ の の 0) 


hd 
ンー の て! 


> で NN に へ 1 


回 
ジ 
ス 
の 
オ 
| 
ム 


| *2 | *2 122*2551*2 


9 O 符 g 


どう *2 | 


*1 9 の み ベ ンダ ー プ レフ ィ ックス (-ms-) が 必要 
*2 ベン ダー プレ フィ ックス (-webkit-) が 必要 


の トラ ンス フォ ー ム の 種類 を 指定 する 


に 4| transform: 多 : 


人 … 変形 方 法 を 示す 関数 も し く は none 


選手 交 形 可能 な 要素 (ブロ ッ ク レ ベル 要素 や 原子 イン ライ ン レ ベル 要素 な ど ) 


CS53 新規 


transform プロ パテ ィ は 、 要 素 を 様々 
な 形 で 変形 べ は る プロ パテ ィ で す 。 

拡大 ( 縮 中 ) ノ 回 転 / 移 動 な どの 変形 を 
行う こと が で きま す 。 また 、 二 次 元 の 変形 
と 、 三 次 元 の 変形 を 行う こと が で きま す 。 

変形 方 法 は 関数 で 指定 し ます 。 複 数 の 関 
数 を スペ ー ス で 区 切っ て 指定 する こと で 、 
複雑 な 変形 を 行う こと も で きま す 。 そ の 場 
合 、 後 に 指定 し た 関数 か ら 順 に 娘 理 され る 
動作 に な り ま す 。 

指定 で きる 関数 は 以下 の と お り で す 。 


ロ 


・translate(X,Y) 
xy で 指定 し た 分 だ け 、 要 素 を 移動 し 


・translateX(x) 

X で 指定 し た 分 だ け 、 要 素 を 右 (また は 
左 ) に 移動 し ます 。 
・translateY(y) 

y で 指定 し た 分 だ け 、 要 素 を 下 (また は 
上 ) に 移動 し ます 。 

・scale(X,y) 

xy で 指定 し た 分 だ け 、 要 素 を 拡大 ( ま 
た は 縮小 ) し ます 。 xy に は 数 値 を 指定 
し ます 。 例え ば 、「scale(2.1.5)]」 と する 
と 、 横 方 向 に 2 倍 、 縦 方 向 に 1.5 倍 に 拡大 
し ます 。 xy に マイ ナス の 値 を 指定 する 
と 、 拡 大 ( 縮 和 0 する だ け で な く 、 左 右 (上 
下 ) に 反転 し ます 。 また 、 y を 省略 する と 、 
x と 同じ 値 を 指定 し た こと に な り ま す 。 


ます 。 xX ノ y に は 、 長 さ を 表す 値 を 指定 し 
ます 。 xy に プラ ス の 値 を 指定 する と 、 
右 ノ 下 に 移動 し ます (マイ ナス の 値 だ と 左 
ン 上 に 移動 )。 また 、y を 省略 する と 、 y に 
0 を 指定 し た こと に な り ま す 。 


・ scaleX(X) 
x で 指定 し た 分 だ け 、 要 素 を 横 方 向 に 拡 
大 (また は 縮 和 | し ます 。 
・scaleY(y) 


transtate(25px,56pxX) 


て transLateX(25px) 


て transtLateY(59px) 


y で 指定 し た 分 だ け 、 要 素 を 縦 
方 向 に 拡大 (また は 縮 中 ) し ます 。 
・ rotate(X) 

x で 指定 し た 分 だ け 、 要 素 を 回 
転 し ます 。x に は 角度 を 表す 値 を 
指定 し ます ( 例 : 30deg)。 プ 
ラス の 値 を 指定 する と 時 計 回 り 
に 回 転 し 、 マ イナ ス の 値 だ と 反 
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図 1 ⑯ translate 関数 translateX 関数 translateY 関数 を 利用 し た 例 時 計 回 り に 回 転 し ます 。 


scaLe(1.2,1.5) 


scateX(1.2) 


scateY(1.5) 


rotate(39deg) 


2 scale 関数 、scaleX 関数 、scaleY 関数 を 利用 し た 例 


skew(15deg,39deg) 


skewX(15deg) 


skewY(39deg) 


3@ rotate 関数 を 利用 し た 例 


4@ skew 関数 、skewX 関数 、skewY 関数 を 利用 し た 例 


・skew(x,y) 

x と y で 指定 し た 分 だ け 、 要 素 を 左 
右上 下 に 傾け ます 。 y を 省略 する と 、 
skew(x,0) と 指定 し た の と 同じ に な り 
ます 。 

・ skewX(x) 

X で 指定 し た 分 だ け 、 要 素 を 左右 に 傾け 
ます 。x に は 角度 を 表す 値 を 指定 し ます 。 
x に プラ ス の 値 を 指定 する と 、 要 素 の 左右 


の 辺 が その 角度 だ け 反 時 計 和 回 り に 傾き ま 
す 。 
・ skewY(y) 

y で 指定 し た 分 だ け 、 要 素 を 上 下 に 傾け 
ます 。y に は 角度 を 表す 値 を 指定 し ます 。 
y に プラ ス の 値 を 指定 する と 、 要 素 の 上 下 
の 辺 が その 角度 だ け 時 計 同 り に 傾き ます 。 


ルウ ワル スス 
く !DOCTYPE htmt> 
<htmt tang=! け a リ > 
<head> 
<meta charset= リ ut プー-8 リ > 
<t1tte> ト ラン ス フ ォ ー ム の 種類 </ttte> 
<styte> 
・rotate { transform: rotate(39deg): 
-webkit-transform: rotate(39deg): disptay: 
1intine-btockj } | 
E 記 </styLe> 
く /head> 
<body> 
<div><1mg src="S2491.png" alt="m> く </d1v> 
</body> 
く /htmt> 
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と ASS トー 
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| 1 
|: 理 日 


まり 届 | < 但 ※ ベン ダー プレ フィ ックス (-webkit-) が 必要 


立体 の トラ ンス フォ ー ム の 種類 を 指定 する 


sl transform: 坦 : 


@⑯ 変形 方 法 を 示す 関数 も し く は none 


Fi ま 議 ブロ ッ ク レベ ル 要 案 や 原子 イン ライ ン レ ベル 要素 な ど 


transform プロ パテ ィ で 、 要 素 を 3D 変 
形 さ せる と き に 利用 する 関数 は 、 以 下 の と 
お り で す 。 


・translateZ(z) 

要素 を Z 軸 方 向 (表示 面 に 垂直 な 方 向 ) 
に z で 指定 し た 分 だ け 移 動 し ます 。 z に は 
長 さ を 表す 値 を 指定 し ます 。 の 値 が プラ 
ス に な る ほど 、 要 素 は より 手前 に 配置 され 
ます (た だ し 、 rotateX ン rotateY 関 数 
で 要素 を 回 転 す る と 、 重 な り 順 が 送 に な る 
場合 も わり ます )。 
・translate3d(x,y,Z) 

要素 を X 軸 ( 横 方 向 ) プ Y 軸 ( 縦 方 向 ) 
グ Z 軸 に 、 そ れ ぞ れ x ノ yz だ け 移 動 し 
ます 。 


transLateZ(59px) 


transtate3d(59px,59px,59PX) 


1 translateZ 関数 、translate3d 関数 を 利用 し た 例 


・ scaleZ(Z) 
要素 を Z 軸 方 向 に z 倍 に 拡大 (また は 縮 
小 ) し ます 。 
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・scale3d(X,y,Z) 
要素 を X 軸 プ Y 軸 /Z 軸 に 、 そ れ ぞ れ x 
yzZ 倍 に 拡大 (縮小) し ます 。 


scateZ(2) 
rotateY(99deg) scaLe3d(1.5,1.5,2) 
rotateY(45deg) 


2 scaleZ 関数 、scale3d 関数 を 利用 し た 例 


・rotateX(r) rotateY(r) 

rotateZ(r) 

それ ぞ れ 、X 軸 プ Y 軸 プ Z 軸 を 回 転 軸 
と し て 、 要 素 を r だ け 回 転 し ます ( 図 3)。 
「 に は 角度 を 表す 値 を 指定 し ます 。 な お 、 
rotateZ(r) は 、 二 次 元 変形 の rotate(r) と 
同じ 動作 に な り ま す 。 
・rotate3d(X,y,Z,『) 

原点 (0.0.0) と (x.yZ) を 結 応 直線 を 
軸 と し て 、 要 素 を r だ け 回 転 し ます 。x ブ 
yz に は 長 さ を 表す 値 を 指定 し 、「 に は 角 
度 を 表す 値 を 指定 し ます 。 


rotateX(39deg) 


rotateY(39deg) 


rotateZ(39deg) rotate3d(1,9,1,45deg) 


3 rotateX 関数 、rotateY 関数 、rotateZ 関数 、rotate3d 関数 を 利用 し た 例 


・Perspective(U 
変形 後 の 要 素 を 透視 図法 で 描画 し ます 
(Z 軸 方 向 の 値 が プラ ス の 要素 は 大 きく 表 


点 の 背後 に あめ っ て 見 えな いこ と 
の で 、 表 示さ れ ま せん 。 


こ な り ます 


示さ れ 、 マ イナ ス の 要素 は 小さ く 表示 され 
ます )。 | に は 消失 点 の 座標 の 値 を プラ ス 
の 長 さ で 指定 し ます 。 

例え ば 、「perspective(200px)」 と し 
た 場合 、 ン 座標 が プラ ス 100px の 位置 に 
ある 要素 は 、X プ Y 方 向 に 2 倍 に 拡大 され 
ます 。 一 方 、Z 座 標 が マイ ナス 100px の 
位置 に ある 要素 は 、X ノ Y 方 向 に 3 分 の 2 
倍 に 縮小 され ます ( 図 4)。 ま た 、Z 座 標 


perspectve(109px) 
rotateX(39deg) 


が プラ ス 200px よ り 大 きい 要素 は 、 消 失 


4@⑯ perspective 関数 を 利用 し た 例 


ブラ ウザ 表示 


サン プル ソー ス 


く !DOCTYPE htmt> 
<htmt tang="a"><head> 攻 問 削 <styLe> 
body { padding: 59pxj } 
div { position: absotutei width: 209px 
height: 299pxi 
・Ccontaner { position: reLatve: transform: 
rotateX(-45deg) rotateY(-45deg) 
transform-styte: preserve-3dj 記 草 肖 } 
・rotateX { transform: rotateX(45deg) 
background-cotor: rgba(255。 165。 の, 9.3): 
} 
</ styte></head><body> 
<dtVv ctass="conta]ner"> 
<d1V ctass="org"><1mg src="S2402.png"' alt 
<div class="rotateX">rotateX(45deg) く </div> 
く /div> 
</body> 
く /htmt> 


=WW> く /d1V> 
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(| 
8 
8 
プ 
ロ 
パ 
テ 
リ 
フ 
PA 
レ 
ン 
ス 


台 0 2.2*2 5.1*2. 


4 ま *2 
@|@ 2 @6 往 *1 9 の み ベ ンダ ー プ レフ ィ ックス (-ms-) が 必要 
*2 ベン ダー プレ フィ ックス (-webkit-) が 必要 


C 

8 ーー 

き トラ ンス フォ ー ム の 原点 を 指定 する 

ロ 
バ 

| 4 transform-orig1n: 氏 人 較 : ・ 電 昌 間 間 
3 ・X 方 向 の 原点 を 示す 値 CS53 新規 
ウ ・… Y 方 向 の 原点 を 示す 値 

・Z 方 向 の 原点 を 示す 値 


に LE ま 得 ブロ ッ ク レ ベル 要素 や 原子 イン ライ ン レ ベル 要素 な ど 


transform-origin プロ パテ ィ は 、 要 素 な お 、 初 期 値 は 「509% 50%] な の で 、 
を 変形 する 際 の 基準 点 を 指定 する プロ パ transform-origin プロ パテ ィ を 指定 し な 
ティ で す 。 XY ン Z の 各 方 向 の 値 を 指定 い 場 合 は 、 要 素 の 中 心 点 が 変形 の 基準 点 に 
し ます 。 な り ま す 。 
値 を ひと つ だ け 指 定 し た 場合 は 、 ふ た つ 
に [center」、3 つ 目 に 「Opx」 を 指定 
し た の と 同じ に な り ま す 。 
また 、 値 を ふた つづ 指定 し た 場合 は 、3 つ 
に [Opx」 を 指定 し た の と 同じ に な り ま 
す 。 

それ ぞ れ に 指定 する 値 は 、leftright 
center プ top/bottom プ パー セン ト 
グ 長 さ の いずれ か を 指定 し ます 。 


サン ブル ソー ス ブラ ウリ 
く !DOCTYPE htmL> 

<htmt Lang="]a"> 

<head> 世 加 当 

<styLe> 

div { border: 2px soLid maroons 
background-coLor: golds 

width: 399pxj } 

.trans { transform: rotate(-3 の deg)} 
-webkit-transform: rotate(-30deg) ぅ 
transform-or1g1n: 399px 9} 
-webkit-transform-or1g1n: 399px の ) } 
</styte> 

</head> 

く <body> 

<div><1mg src="S2493.png" at=""> く /d1V> 
<div cLass=" モ trans"> て ransfrom</d1V> 
</body> 

< く /htmt> 


プ 
ン 
ス 
フ 
オ 
| 
ム 
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2.2* 5.1* 


10 まま 
弄 レオ * ベン ダー プレ フィ ックス (-webkit-) が 必要 


aeeeol 
トラ ンス フォ ー ム を 平面 が 立体 が 指定 する 


許 と =: 抽 3 
情 
5x| transform-styLe: 坦 : 人 
⑯ 奥行 き を 持た せる か どう か を 指定 する キー ワー ド CS33 新規 
EE 生得 ブロ ッ ク レ ベル 要素 や 原子 イン ライ ン レ ベル 要素 な ど 間 


transform-style プロ パテ ィ は 、 対 象 要 行 寺 の ある 表示 が され て いる こと が が わか 
素 の 子 要素 を 描画 する 際 に 、 奥 行き を 持た り ま す 。 


せる か どう か を 指定 し ます 。 
指定 で きる キー ワー ド は 以下 の と お り 
で す 。 ブラ ウザ 表示 


*・ Dreserve-3d… 子 要素 は 方 向 の 奥行 
が で き 、 立 体 的 に 描画 
・flat… 子 要素 は 平面 上 に 描画 : 初期 値 


な お 、IE10 は flat の み に 装 応 し て いま す 。 
サン プル で は 、 ト ラン ス フ ォ ー ム の 種類 
を 「preserve-3d] に 指定 を し て いま す 。 
その た め 、 ブ ラウ ザ で 表示 し た と き に 、 奥 


隊 ッ PP 
く !DOCTYPE htmt> 
<htmL tang="a"><head> 計 中 当 <styLe> 
body { padding: 25px 9 9 159pxi } RE [5 肝 誠 
・c1 { transform-stytLe: preserve-3di て transform: rotateX(-19deg) rotateY(-20deg) : 
position: retativej 穫 難 盾 
・P { pos1tion: absotutei width: 299pxj heght: 299px: } 
Bu 呈 1 中 15 
・P2 { transform: transtateZ(199px) 穫 計 : 肌 
・P3 { transform: transtateZ(299px) 所 下 : 肝 
</styLe></head><body><d1v ctass="c1"> 
<div ctass="p p1">#1 く /d1V> 
<div ctass="D p2!>#2 く /d1V> 
<div ctass=Wp p3"><img src="S2494.png!" at=!0> く /d1v> 
</d1v> 
</body> 
</htmt> 
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SJNM で NN に ュ ニ ロロ NIIOO の OO 


| @ 吉 @ ( り み * ベン ダー プレ フィ ックス (Cwebkit-) が 必要 

| 奥行 き を 持た せる か どう か 指定 する 

) 孤 凡 Perspective: 人 …: - 間 了 半 0 較 
2 還 有  @ 軸 行 き を 示す 数 値 も し く は none lab 
レ 

ン 

ス 


EE も : 変形 可能 な 要素 


Derspective プロ パテ ィ は 、 透 視 図法 
で 要素 を 描画 する た め に 、 奥 行き が 0 の 面 
か ら 消 失点 まで の 距離 を 指定 する プロ パ 
ティ で す 。 

値 は 奥行 き を 示す 数 値 を 指定 し ます 。 初 
期 値 は none で す 。 
transform プ ロ パ ティ の Derspective - 
関数 と 似 て いま す が 、perspective 関 数 ブラ ウザ 表示 _ 
は その 要素 自身 が 対象 に な る の に 対し 、 
perspective プロ パテ ィ は その 要素 の 子 
要素 が 対象 に な る 点 が 異な り ま す 。 
その た め 、 transform プロ パテ ィ の 様々 
な 関数 で 変形 べ せ た 要素 は 、Z 軸 方 向 の 値 
が プラ ス の 要素 は 大 きく 表示 され 、 マ イナ 
の 要素 は 小さ べく 表示 され ます 。 


サン ブル ソー ス 


く !DOCTYPE html> 
<htmL tang="a"><head> 医 党 styLe> し 
body { padding: 25px 9 9 59pxj } 
dtv { pos1tion: absotute: width: 299pxj』 he1ght: 299pxi 
.container { perspective: 399pxj pos1t1on: retativei width : 299pxj he1ght: 209pxi 
transform: rotateX(-29deg) rotateY(45deg): transform-styte: preserve-3d: 穫 語 : 角 
org 公正 
.transZ1 { て transform: transLateZ(-199px) : 拭 記 : 革 </styte></head><body> 
<div ctass="conta1ner"> 
<div ctass="org"><1mg Src="S2495.png" alt="W> く /d1V> 
< く dv ctass=" て ransZ1"> て ransZ1 く /d1V> 
</d1v></body></htmt> 
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40* | 51* 


8| @ @ @ (0 L 』 レコ ※ ペン ダー プレ フィ ックス (-webkit-) が 必要 
奥行 き の 消失 点 を 指定 する 


| 構 
駅 Perspective-orig1n: 坦 全 : 


価 -… 消失 点 の X 方 向 の 位置 を 示す 数 値 ま た は キー ワー ド 
合 … 消失 点 の Y 方 向 の 位置 を 示す 数 値 ま た は キー ワー ド 


総 
S 
S 
プ 
ロ 
バ 
イィ 
リ 
了 y 
ア 
レ 
/ 
水 


所 計 腸 交 形 可能 な 要素 


DersDectiVe-Origin プロ パテ ィ は 、 透 、 面 か ら 見 た イメ ー ジ を 表示 する 形 に な り ま 
視 図法 の 消失 点 の XY 方 向 の 位置 を 指定 す 。 消 失点 を 上 に ずら す と 、 要 素 を 斜め 上 
する プロ パテ ィ で す 。 か ら 見 下ろ すこ と に な り ま す の で 、 そ れ に 
直 は XY と も 、 長 さ を 表 す 値 や 、 パ ー 沿っ た 形 で 表示 され ます 。 

セン ト を 指定 し ます (パー セン ト の 


消失 点 。z く 0 z=0 z>0 


場合 は 、 要 素 の サイ ズ に 対す る 比率 の 要素 の 要素 の 要素 
を 表し ます )。 1 


また 、X 方 向 は left center ン 
right、Y 方 向 は top プ center/ | 消失 点 を 
bottom の キー ワー ド で 指定 する こ | 移動 
と も で きま す 。 

この プロ パテ ィ を 指定 し な い 場 
合 、 初 期 値 は 「5096 50%] (要素 
の 中 心 ) に な っ て いて 、 要 素 を 真正 


MA ソル 
く !DOCTYPE html> 
<htmt tang="a"><head> 攻 軒 削 <styLe> 
body { padding: 49px 59px の: + 
div { position: absotutej width: 1509pxs 
heght: 159pxj } 
・conta1ner { perspectjve-or1gin: Left tops 
PerSpective: 159pxj pos1tion: reLat1ves 
transform: rotateX(-209deg) rotateY(45deg) ぅ 
transform-styLe: preserve-3dj 葉 表 : 処 
・org 地表 簡 
・transZ1 { て ransform: transtateZ(509px) 
Ei 用 </styUe></styLe></head><body> 
<div ctass=V'conta1ner> 

<div ctass=Worg">or1g1nat</d1V> 

<div ctass=" モ FansZ1><]mg src="S2406. 
png'' att=> く /d1V> 
く /d1V> 
</body></htmt> 


283 


4.0* 5.1* 


| * キ 
「 に 107 剛 g ま ベン ダー プレ フィ ックス (Cwebkit-) が 必要 


10 1 1 
( 六 


C 

8 裏面 の 可視 化 を 指定 する 
は 癌 

7 正則 backface-visibitity: 代 : 

⑯ 裏面 を 表示 する か どう か を 示す キー ワー ド 
ン 

ス 


お 避 EE 志和 坦 ブロ ッ ク レ ベル 要素 や 原子 イン ライ ン レ ベル 要素 な ど 


要素 を 3D 変 形 す る と 、 要 素 の 裏側 と き は 、 表 側 を 透かし た よう に (上 下 

が 前 面 に 出る こと が あり ます 。 例 えば 、 や 左右 を 反転 し て ) 表示 : 初期 値 

transform プロ パテ ィ の rotateX 関 数 や 

rotateY 関 数 で 要素 を 回 転 す る 場合 、90 

度 一 270 度 回 転 さ せる と 、 要 素 の 裏側 が 

前 面 に 出 ます 。 

backface-visibilty プロ パテ ィ は 、 こ 

の よう な と き の 要 素 の 表示 方 法 を 指定 する ブラ ウザ 表示 

プロ デイ 人 きま 。 
指定 で きる キー ワー ド は 以下 の と お り 

Se 電 


ト 
レン 4 
以 
し 4 
フ 
と 
| 
ム 


・ hidden… 要 素 の 裏側 が 前 面 に 出 て いる 
と き に は 、 要素 を 非 表 示 
*・ Visible… 要 素 の 裏側 が 前 面 に 出 て いる 


サン ブル ソー ス 


< く !DOCTYPE htmt> 
<htmt tang="]a"> 
<head> 攻 前 削 
く <styLe> 
.container { disptay: 1nLuine-btocki + 
trans { backface-visib1tLity: visibLe: transform: perspect1ive(299Dpx) 
rotateY(159deg) 入 基 : 軸 
</'styte> 
く /head><body> 
<div ctass="conta1ner"><1mg src="S2497.png"' att="0></d1V> 
<div ctass="conta1ner リ > 
<div ctass="trans"><1mg src="S2497.png"' att て = らく /d1V> 
く /d1v> 
</body></htmt> 
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10 | | 22* 51* ーー ーー 和 
@@@@O ひ ) 


下 レオ * ネ ペン ダー プレ フィ ックス (-webkit-) が 必要 


トラ ンジ ショ ン の 内 容 を 指定 する 
構 
が 4| transition-property: 雪 : CO 


⑯ 変化 させ る プロ パテ ィ 名 も し く は none も し く は al 353 新規 


C 
8 
S 
ヴ 
ロ 
バ 
ィ 
リ 
ラ 
4 
レ 
に 
字 


だ 選 邊 寺本: 湯 すべ て の 要素 と :before ノ ::after 疑似 要素 


transition-Droperty プロ パテ ィ で 、 変 す 。 その た め 、 ブ ラウ ザ で 表示 し た と き に 、 
化 さ は する プロ パテ ィ の 名 前 を 指定 し ます 。 イラ スト の 部 分 に マウ ス オ ー バ ー す る と 背 
指定 で きる 値 は 以下 の と お り で す 。 景色 が 白 か ら 金 色 に 変化 する の が わか り ま 


・ プ ロ パ ティ 名 .… 指 定 し た プロ パテ ィ の 値 
が 変化 し ます 。 

* none… ど の プロ バテ ィ の 値 も 変化 し ま ーー ュー ニー 
せん 。 こち 5 も みそ て い 3 

・alL… す べ て の プロ パテ ィ の 値 を 変化 さ 
せる こと が で きま す : 初期 値 


サン プル で は 、 ト ラン ジ シ ョ ン の 内 容 を 
「background-color」 に 指定 を し て いま 


生 拓 ツア ルツ エス N 
く IDOCTYPE htmt> 

<htmL tang="]a リ "> 

<head> 諾 衣 

く sty Le> 

#trans { 

border: 2px groove goldi 
trans1tion-property: background-cotor: 
trans1tton-durat1on: 9.3sj 
trans1ton-t1ming-function: Lineari } 
#transihover † 

background-cotor: goLdenrod: + 

中 申 93SAV5 

</head> 

<body> 
<d1v id="trans"><1mg src="S2591.png" alLt=> く /dv> 

く </body> 

</htmt> 
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22* ま 5.1* 


KKKUE 


に > っ ま 4 


レコ 。 * ベン ダー プレ フィ ックス (-webkit-) が 必要 


トラ ンジ ショ ン の 時 間 を 指定 する 


ssl transition-duraton: 坦 3 
人 @ 変化 させ る 時 間 


Ei が まま 得 すべ て の 要素 と ::before / ::after 疑似 要素 


transition 系 の プロ パテ ィ を 使っ て 、 あ 
る プロ パテ ィ の 値 を 変化 させ る 際 、 段 階 的 
に 変化 させ る こと が で きま す 。 

この し くみ を 使っ て 、 ア ニメーション 的 
な 効果 を 得る こと が で きま す 。 

例え ば 、「 要 素 を マウ ス で ポイ ント し た 
と き に 、 背 景色 を 徐々 に 変え る ] と いっ た 
こと が で きま す 。 
transition-duration プロ パテ ィ は 、 プ 
パテ ィ を 変化 させ る 時 間 を 指定 し ます 。 
J 期 値 は 0s (0 秒 ) で す 。 
例え ば 、3 秒 間 で 変化 させ る 場合 は 、「35」 


き # 


と 指定 し ます 。 

サン プル で は 、 ト ラン ジ シ ョ ン の 時 間 を 
[3s」 に 指定 を し て いま す 。 その た め 、 ブ 
ラウ ザ で 表示 し た と き に 、 イ ラス ト の 部 分 
に マウ ス オ ー バ ー す る と 3 秒 か か っ て 背景 
色 が 白 か ら 金色 に 変化 する の が わか り ま 


サ ソ ツ ルツ ソス 
<!DOCTYPE htmt> 
<htmt tang="]a"> 
REEe 中 星 | 
< く sty Le> 
#trans て 
border: 2px groove godi5 半 当 
て rans1t1on-property: background-cotors 
trans1t1on-duratton: 3S: 
trans1t1on-timing-function: Lineari + 
#transihover { 
background-cotor: gotdenrodi } 
医員 削 </styte> 
</head> 
く body> 


alt=W> く /d1V> 
</body> 
</htmt> 


<div 1d="trans"><1mg src="S2592.png" 
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「 レス * ネ ペン ダー プレ フィ ックス (-webkit-) が 必要 


「 
ぐう ぐる | 3 S 
トラ ン ジ シ ョ ン の 変更 具合 を 指定 する 。 5 
ゝ 日 
バ 
上 っ テ 
4| trans1t1on- て ming-functon: 電 : 『 
| @ 変更 具合 を 示す 関数 CT0 新 放 タラ 
ン 
ス 

すべ て の 要素 と ::before  ::after 疑似 要素 


transItion-timing-function プ ロ パ ティ は 以下 の と お り で す (変化 の イメ ー ジ の 縦 
は 、 プ ロ パ ティ の 値 の 変更 具合 を キー ワー 軸 は プロ パテ ィ の 値 の 変化 度 、 横 軸 は 時 間 


ド で 指定 し ます 。 初期 値 は ease で す 。 で す )。 
指定 で きる キー ワー ド と 変化 の イメ ー ジ 


変化 の 概要 変化 の イメ ー ジ 
linear 直線 的 に 変化 


最初 は や や ゆる や か に 変化 し た 後 、 大 きく 変化 し 、 
最後 は ゆる や か に 変化 


ィ 
と 
ease-in 変化 する スピ ー ド が 徐々 に 上 が る ーー アゲ 
ッッ 
ア 


eaSe 


ease-out 変化 する スピ ー ド が 徐々 に 下がる 


ease-in-Out 最初 と 最後 は ゆる や か に 変化 


MM ルル iA 


く !DOCTYPE html> 

<htmt tang=!a"> 

<head> 芝 当 

く styte> 

#trans † 

border: 2px groove gotdj 下 
trans1tion-property: background-coLor , 
cotors 

trans1t1on-duration: 9.3s: 

て trans1tion- て 1ming-func て on: ease-out: + 
#trans:hover 

background-cotor: goLdenrod: + 

E 語 当 </styte> 

< く /head> 

< く body> 

<div id="trans"><1mg src="S2593.png"' att= ら </d1v> 
< く /body> 

< く /htmt> 
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10 | 22* | 51* 


も | | 
し 旭 @O0 末 レナ * ベン ダー プレ フィ ックス (-webkiL.) が 必要 


8 トラ ンジ ショ ン の 開始 タイ ミン グ を 指定 する 
ロ 

ァ 

り | transition-detay: 坦 : 

p 還 旧 @ … プロ パテ ィ の 変化 を 開始 する まで の 時 間 

ン 

ヌス 


El 所 位 すべ て の 要素 と ::before / ::after 疑似 要素 


transition-delay プロパ ティ は 、 プ に 変化 する の が わか り ま す 。 
パテ ィ の 変化 を 開始 する まで の 時 間 を 指定 
し ます 。 初期 値 は 05 で す 。 

例え ば 、「transition-delay: 25] と す 
る と 、 プ ロ パ ティ の 値 を 変え る よう な 操作 
を し て か ら 2 秒 後に 、 トランジション の 効 
果 が 出 始め ます 。 

サン プル で は 、 ト ラン ジ シ ョ ン の 開始 
イミ ング を 「O.5s」 に 指定 を し て いま す 。 
その た め 、 ブ ラウ ザ で 表示 し た と き に 、 イ 
ラス ト の 部 分 に マウ ス オ ー バ ー し て か ら 
0.5 秒 経っ た あと で 、 背 景色 が 白 か ら 金色 


| ブラ ウザ 表示 


<!DOCTYPE htmt> 

<htmt tang="]a"> 

<head> 医 癌 肖 

く styLe> 

#trans 

border: 2px grooVe gold} 
transition-property: background-coLors 
trans1t1on-duraton: 9.3S: 
trans1ition-t]1ming-funct1on: Linears 
trans1ition-detay: 9.5s) } 

#transihover { 

background-cotor: gotdenrod) + 

EE 軸 清 //styLe> 

</head> 

< く body> 

<div 1d="trans"><1mg src=V"S2504.png' alLt=WW></d1V> 
< く /body> 

</htmt> 
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2.2* ま 5.1* 


10 | 。 
代 を 豊 ⑳ ひ 議 レフ ま ※ ペン ダー プレ フィ ックス (-webkit-) が 必要 


C 
mm 4 や 3 | ココ に 】 
トラ ンジ ショ ン の スタ イル を 一 括 指定 する 
構 了 バ 
sl transition: 遷 A 圏 文 : (9 
⑯ … 変化 させ る プロ パテ ィ 名 も し く は none も し く は al 上 ET ラ 
人 … 変化 させ る 時 間 
画 … 変更 具合 を 示す 関数 和 

太 … プロ パテ ィ の 変化 を 開始 する まで の 時 間 


本 上 回 肌 記 だ 記 腫 すべ て の 要素 と ::before // :after 疑似 要素 


及 
transition プ ロ パ ティ は 、transition trans1tion: width 2s tinear 
系 の プロ パテ ィ を まとめ て 指定 し ます 。 9s, heght 2s Linear 9Ss: 
各 プ ロ パ ティ の 値 は 、 ス ペー ス で 区 切っ 
て 指定 し ます 。 値 を 指定 する 順序 は 自由 で す が 、 時 間 


また 、 複 数 の プロ パテ ィ を 同時 に 変化 さ を 指定 し た 場合 、 最 初 の 値 が transition- 
せる こと も で きま す 。 そ の 場合 は 、 人 一 友 duration プ ロ パ ティ の 値 、 そ の 後に 出 て 
まで の 値 を 1 組 と し て 、 そ れ ぞ れ の 組 を コ くる 値 は transition-delay プロ パテ ィ の 
ンマ で 区 切っ て 指定 し ます 。 値 と し て 解釈 され ます 。 

例え ば 、width プ ロ パ ティ と height プ 

パテ ィ を 、 同 時 に 2 秒間 に 渡っ て 直線 的 

こ 変 化 させ る 場合 、 次 の よう な 書き 方 を し 

ド す 。 


QL 


人 六 グル ジロ ス 
く !DOCTYPE htmLl> 
<htmLt tang="]a"> 
く head> 

<meta charset="utf-8"> 

<titLe> ト ラン ジ シ ョ ン の 一 括 指定 </titUe> 

< く styte> 

#trans て 

border: 2px groove gold: 抱 潮 当 

trans1tions background-cotor 9.3s Lineari } 
#transihover 

background-cotor: gotdenrodi + 

E 癌 削 </styte> 

</head><body> 

<diV 1d="trans"><]mg src="S2595.png!' alt=!W> く /d1V> 
< く /body> 

</htmt> 


ブラ ウザ 表示 


関連 トラ ンジ ショ ン の 内 容 を 指定 する (P.285) 、 ト ラン ジ ショ ン の 時 間 を 指定 する (P.286) 、 289 
トラ ンジ ショ ン の 変更 具合 を 指定 する (P.287)、 ト ラン ジ ショ ン の 開始 タイ ミン グ を 指定 する (P.288) : 


ロロ の の の 


ヽ ー 
ピン 


イ 
り 
9 
ァ 
レ 
ン 
ス 


10 ま 4.0 ま | 5.1* 


き を @ @ oO し 』 @ ま ※ ペン ダー プレ フィ ックス (-webkit-) が 必要 
キー フレ ー ム を 指定 する 


構 
に Gkeyframes 坦 { Q 
ふる [ ay 
| | ⑯ アニメーション の 名 前 
} 人 … 進行 度合 
M 較 … 変化 させ る プロ パテ ィ と 値 


葉 : 計 回 届 久 も 詳 すべ て の 要素 と ::befare // :after 疑似 要素 


8 
ニメーション を 行う に は 、 ま ず ア ニニ で 指定 し ます 。 
メー ショ ン の 「 キ ー フ レー ム 」 を 定義 し ます 。 人 に は 「 進 行 度合 」 を 指定 し ます 。 値 
キー フレ ー ム は 、 ア ニメーション の 最初 は 「0%] 「10%」 な どの パー セン ト 表 記 
と 最後 や 、 そ の 途中 に お ける プロ パテ ィ と を 、 ア ニメーション 全体 に 対す る 進行 度合 
値 を 設定 する の に 使用 し ます 。 ブラ ウザ は と し て 定義 し ます 。 進 行 度合 に は 、 「from] 
設定 の 中 間 を 埋め 、 ア ニメーション を 表示 「to] と いう キー ワー ド を 指定 する こと も 
し ます 。 で きま す (from が 096 (最初 の 状態 )、to 
「@keyframes] ルー ル は 、 キ ー フ レー が 10096 (最後 の 状態 ) に 対応 )。 
ム を 定義 し ます 。 アニ メー ショ ン の 進行 度 そし て 、 そ れ ぞ れ の 進行 度合 の ブロ ッ ク 
合 と と も に 、 各 時 点 で の 個々 の プロ パテ ィ ( 田 ) に 、 そ の 時 点 で の プロ パテ ィ の 値 を 
の 値 を 設定 し ます 。 指定 し ます 。 
氏 に 「 ア ニメーション 名 」 を 半角 英 数 字 
e 


く !DOCTYPE htmt> 
<htmt tang="ja"><head> 記 部 当 
く StyLe> 
G@keyframes an1me { 

9% { background-cotor: crimsoni + 

190% { background-cotor: cornflowerbtues 
+ 
div { background-coLor: #CCCCCC ぅ 
auign: centeri padding: 19pxj 
an1mat1on-name: an1mej an1mat1on-duraton: 


て tex キー 


1sj』 an1mat1on-t1ming-function: Linears 
[中略 

</styte></head><body> 

<div><1mg src="S2691.png"' alLt=W> く /d1V> 
< く /body> 

</htmt> 
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40* 5.1* 


10 1 ※ 1 ま | * 
@| @ に g 0 机 り | レイ * ネ ペン ダー プレ フィ ックス (-webkit-) が 必要 


アニ メー ショ ン の 名 前 を 指定 する 


ロロ の 0 の O 


構 


= an1mation-name: 夫 : ( 
@ …… @keyframes ル ー ル の 名 前 も し く は none 人 


に 二 還 2G ま 得 すべ て の 要素 と ::before /::after 疑似 要素 


ヽ ー 
レバ 


イ 
リ 
フ 
ア 
レ 
ン 
ス 


animation-narme プロ パテ ィ で 、 有 再生 と 名 前 の 付け られ た アニ メー ショ ン の 通 
する アニ メー ショ ン の @keyframes ル ー り 、 背 景色 が 赤 紫 か ら 青 に 変わ る の が わか 


ル の 名 前 を 指定 し ます 。 り ま す 。 
初期 値 は nhone で す 。 
animation-name プロ パテ ィ で anim- 
ation 系 の プロ パテ ィ と @keyframes ル ー 


ル を 関連 付け こ 、 ア ニメーション の 細か な 
設定 を する こと が で きま す 。 

サン プル で は 、 ア ニメーション の 名 前 を 
「showElement」 に 指定 を し て いま す 。 し ょ うー こ ャ か | 
その た め 、 ブ ラウ ザ で 表示 し た と き に 、@ 0 


ィ 


keyframes ル ー ル で 「showElementl 


サン ブル ソー ス 同 
< く !DOCTYPE html> 


<htmt tang="a"><head>EE 滞 当 
< く styLte> 


Gkeyframes showELement { 


9% { background-cotor: crimsoni } 
199% { background-coLor: cornflowerbLue: 


+ 

負 中 申 

div { background-coLor: #CCCCCCj て ex キー 
aLign: centerj padding: 19pxs 
animat1on-name: showELement: an1mat1on- 
duraton: 1sj an]1mat1on-t]m1ng-function: 
tneari 攻 下 軸 

く /styte> 

</head><body> 


<d1v><1mg src="S2692.png!' att=W> く /d1V> 
</body> 
く /htmt> 
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10 | * 40* | 


馬 幸 に | se 
@」 @ 賜 に 0 下 レス *※ ベン ダー プレ フィ ックス (-webkit.) が 必要 


G 

き 1 回 の アニ メー ショ ン の 時 間 を 指定 する 
な 開 

1 に animat1on-duration: 替 : ・ 
? @ 1 回 の アニ メー ショ ン の 時 間 MM 
ン 

ス 


Ei 沈ま: 得 すべ て の 要素 と :before  ::after 疑似 要素 


animation-duration プ ロ パ ティ は 、 
プロ パテ ィ を 変化 させ る と き の 1 回 あたり 
の 時 間 を 指定 し ます 。 初期 値 は 0s で す 。 
例え ば 、3 秒 間 で 変化 させ る 場合 は 、「35」 
と 指定 し ます 。 

サン プル で は 、 ア ニメーション の 時 間 を 
「3s」 に 指定 を し て いま す 。 その た め 、 ブ 
ラウ ザ で 表示 し た と き に 、3 秒 か か っ て 背 
景色 が 赤 紫 か ら 青 に 変化 する の が わか がり ま 
す 。 


サン プル ソー スズ 
< く !DOCTYPE htmL> 
<htmU tang=a><head> 度 汗 当 
<styte> 
@keyframes anime { 
6% { background-coLor: cr1msoni + 
199% { background-cotor: cornflowerbLuei } 
div { background-coLor: #CCCCCC3 て ex モー 
atign: centeri padding: 19pxs 
animation-name: an1me: an1mation-duration: 
3sj an1mation-t1iming-funct1ion: Linears 
中 申 
</ styte> 
</head><body> 
<d1v><jmg Src=!S2693.png" att= リ "> く /d1V> 
</body> 
</htmt> 
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40* 5.1* 


@ コ 2 の ② O レフ \ ま ベン ダー プレ フィ ックス (-webkit-) が 必要 
アニ メー ショ ン の 変更 具合 を 指定 する 


構 
4| anmat1on-t1ming-fucton: 坦 : ③ 


@ -・ 詳 更 具 合 を 示す 関数 の 39 者 誠 


だ: 習得 すべ て の 要素 と ::before  ::after 疑似 要素 


animation-timing-function プ ロ パ 
ティ は 、 プ ロ パ ティ の 値 の 変更 具合 を 関数 
で 指定 し ます 。 

関数 と し て 、 ベ ジ エ 曲 線 系 の 関数 を 指定 
する こと が で きま す 。 初期 値 は ease で す 。 
指定 で きる 関数 は 、transition-timing- 
function プロパ ティ と 同じ で す 。 

サン プル で は 、 ア ニメーション の 変更 具 
合 を 「ease-out」 に 指定 を し て いま す 。 
その た め 、 ブ ラウ ザ で 表示 し た と き に 、 背 


ポー ト ュ い ドーン は 
景色 の 変化 が 最後 は ゆっ くり に な る の が わ 介 w りな かも し ない 
が り ま す 。 


のり D5noA 
< く !DOCTYPE html> 
<htmt tang="ja"><head> 葉 計 邊 
<styte> 
Gkeyframes anime { 

9% { background-coLor: cr1msoni } 


199% { background-cotor: cornflowerbtue: } 
則 中 」 
div { background-cotor: #Ccccccj text-align: center: padding: 10pxj 
animat1on-name: animej animaton-duration: 3sj an1mation-timing-functon: 
di 中 暗 1 
く /sty Le> 
</head><body> 
<d1v><img src="S2694.png!' alLt="> く </dTV> 
</body> 
</htmt> 


GaSse- 


関連 
) トラ ンジ ショ ン の 開始 タイ ミン グ を 指定 する (P.288) 
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ロロ NL の の OO 


に 
の 


AN で へ に ふ 由 


* | 4ox 5 


ミ | @ @ ー @O 4 ※ ベン ダー プレ フィ ックス (-webkit-) が 必要 

き 8 アニ メ ーション の 開始 タイ ミン グ を 指定 する 
パ 問 

1 = animat1on-detay: 坦 : 

? ⑯ … プロ パテ ィ の 変化 を 開始 する まで の 時 間 

24 

ス 


EE 上 ま 得 すべ て の 要素 と :before  ::after 疑似 要素 


animation-delay プロ パテ ィ は 、 プ ロ 
パテ ィ の 変化 を 開始 する まで の 時 間 を 指定 
する プロ パテ ィ で す 。 初期 値 は 05 で す 。 

例え ば 、「animation-delay: 2s] と す 
る と 、 プ ロ パ ティ の 値 を 変え る よう な 操作 
を し て か ら 2 秒 後に に アニメ ーション 効果 
が 出 始め ます 。 

サン プル で は 、 ア ニメーション の 開始 

ミン グ を 「2s] に 指定 を し て いま す 。 

その た め 、 ブ ラウ ザ で 表示 し た と き に 、2 
秒 経っ た あと で 、 背 景色 が 赤 紫 か ら 青 に 変 
化す る の が わか り ま す 。 


<1DOCTYPE htmL> 
<htmt tang="ja"><head>E 肖 当 
く styLe> 
Gkeyframes an1me { 
0@% { background-coLor: cr1msoni } | 
199% { background-cotor: cornflowerbtuei 、 
肖 P 
i 中 略 | 
div { background-coLor: #CCCCC て 』 上 ex モー 
atign: centeri padding: 19pX: 
animat1on-name: an1me: an1mat1on-duration: 
3s) an1ima モ 1on- モ 1m1ng-funct1on: ease-Out: 
animation-detay: 2s 入 加 : 午 
< く /styte> 
</head><body> 
<div><1mg src="S2695.png" al て =""></d1v> 
</body> 
く /htmt> 
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な @ @ O ] @| ※ ペン ダー プレ フィ ックス (-webkit-) が 必要 
アニ メー ショ ン の 繰り 返し 回 数 を 指定 する 
構 
| an1maton-]1teration-count: 坦 : 。 
@ … アニ メー ショ ン の 繰り 返し 回 数 を 示す 数 値 上 ET la 


も し く は infinite 


に 庄司 上 手記 導 すべ て の 要素 と ::before プ ::after 疑似 要素 


animation-iteration-count プ パ し 回 数 を 「2] に 指定 を し て いま す 。 その 
ティ は 、 ア ニメーション の 繰り 返し の 回 数 た め 、 ブ ラウ ザ で 表示 し た と き に 、 背 景色 
を 指定 する プロ パテ ィ で す 。 が 赤 紫 か ら 青 へ 変化 を 2 回 繰り 返す の が わ 
値 は 0 より 大 き な 数 値 を 指定 し ます 。 初 か り ま す 。 
期 値 は 1 で す 。 小 数 点 以 下 の 値 を 含む 場合 
は 、 ア ニメーション の 再生 が 途中 で 止ま 
り ま す 。 例 えば 、「animation-iteration- 
count: 1.5] と する と 、1 回 半 再生 し て 終 
了 し ます 。 

な お 、「infinite」 を 指定 する と 、 無 限 
に 繰り 返し て 再生 し ます 。 

サン プル で は 、 ア ニメーション の 繰り : 


mn htmt> 


<htmL tang="a"><headzE 時 当 

< く styLe> 

G@keyframes anime { 
0% { background-coLor: crimson: } 
199% { background-cotor: cornflowerbtuei } 

中 申 | 

diVv { background-coLor: #cccccci text-aLign: center: padding: 10pxs 

an1mation-name: animej animation-durat1on: 3s:』 animat1on-t1ming-funct1on: ease- 

outj animation-iteration-count: 2: 半 : 午 

</styte></head><body> 

<div><1mg src="S2606.png att=!W> く </d1v> 

</body> 

</htmt> 


ロ 


税 


9 そば た あい > 
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10 キ * 。 40* 5.1* 
レス *※ ベン ダー プレ フィ ックス (-webkit-) が 必要 


8eweos8 
アニ メー ショ ン の 再生 方 向 を 指定 する 


構 


sl animat1on-directon: 坦 : Q② 
@ 再生 方 向 を 指定 する キー ワー ド RU 


た 生 も 坦 すべ て の 要素 と :jbefore / ::after 疑似 要素 


animation-directtion プ ロ パ ティ は 、 サン プル で は 、 ア ニメーション の 再生 方 

再生 の 方 向 を 指定 する プロ パテ ィ で す 。 向 を 「alternate」 に 指定 を し て いま す 。 

指定 で きる キー ワー ド は 以下 の と お り その た め 、 ブ ラウ ザ で 表示 し た と き に 、 ア 

で @。s ニメーション の 繰り 返し の 偶数 回 目 で は 再 
生 方 向 が 反転 する の が わか り ま す 。 


: normal… 先 頭 か ら 最後 に 向かっ て 再 
生 : 初期 値 

・ reverse… 最 後 か ら 先頭 に 向かっ て 再生 

s alternate… 繰 り 返 し の 奇数 回 目 で は 
normal、 偶 数 回 目 で は reverse で 再生 

: alternate-reverse… 繰り 返し の 奇 
数 回 目 で は reverse、 偶 数 回 目 で は 
normal で 再生 


く !DOCTYPE htmt> 
<htmt tang="ja"><head> 世 革 当 
<styLe> 
G@keyframes an1me { 
9% { background-cotor: cr1imsoni + IL 
199% { background-cotor: cornflowerbtuei + 
} 
div { background-coLor: #cccccci text-aLign: centerj padd1ng: 19DpX 
animation-name: animej animation-duration: 3s: animation-t1iming-funct1on: ease- 
outi animation-iteration-count: 43 animation-direction: aLternate 入 店 : 肝 
</'styte></head><body> 
<div><1mg src="S2696.png" alt=0> く /d1V> 
</body> 
</htmt> 


4.0*。 5.1* 


き を に @ O レフ * ベン ダー プレ フィ ックス (C-webkiL) が 必要 
アニ メー ショ ン の 再生 状態 を 指定 する 


構 
記 an1mation-ptay-state: 電 : Q 


⑯ . 再生 状態 を 示す キー ワー ド 


EE 所 ま 手 得 すべ て の 要素 と :before // ::after 疑似 要素 


animation-play-state プロ パテ ィ は 、 する と アニ メー ショ ン が 止ま る こと が わか 
アニ メー ショ ン の 再生 状態 を 指定 する プ り ま す 。 
パテ ィ で す 。 

指定 する キー ワー ド は 下記 の と お り で 
す 。 


- running… 再 生 汰 態 初期 II 


・ Daused… 再 生 を 中 断 


サン プル で は 、 マ ウス オー バー 時 の アニ 
メー ショ ン の 再 生 状 態 を 「paused」 に 指 
定 を し て いま す 。 その た め 、 ブ ラウ ザ で 表 
示し た と き に 、 イ ラス ト に マウ ス オ ー バ ー 


サンシン ブ ルソー ス 
く !DOCTYPE htmL> 
<htmt tang="ja"><head> 攻 滞 :Kstyte> 
Gkeyframes anime 

9% { background-cotor: cr1msoni } 

199% { background-cotor: cornflowerbLue: + 
JE 
dv { background-coLor: #CCCCCC』 ex モー 
align: centeri padding: 19px: 
an1mation-name: an1mej an1mat1on-durat1on: 
3s) an1mat1on-t1m1ng-funct1on: ease-out ぅ 
animation-1teration-count: 4: 穫 店 : 和 
divihover { animation-ptay-state: pausedi 剖 : 逢 
</styte></head><body> 
<div><img src="S2697.png" alLt=W"> く /dTV> 
く </body> 
</htmt> 


W 
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4.0* 5.1* 


10 ※ キ 
トド kJ ト W 107 末 レフ * ペン ダー プレ フィ ックス (-webkit-) が 必要 


⑯ アニ メー ショ ン 再 生前 後 の 表 示 を CS53 新規 


指定 する キー ワー ド 


C 

S アニ メー ショ ン 再 生前 後 の 表示 を 指定 する 
バ 構 

了 | animat1on-fiLL-mode: 夫 : きり 

ラフ 

レ 

4 


時 まま: 考 すべ て の 要素 と ::before / ::after 疑似 要素 


animation-fil-mode プ ロ パ ティ は 、 ・ backwards… ア ニメーション 開始 前 
アニ メー ショ ン の 開始 前 と 終了 後に に アニ (animation-delay プロ パテ ィ の 時 間 
メー ショ ン 対 象 の プロ パテ ィ の 値 を どの よ が 経過 する まで ) に アニ メー ショ ン の 
うに 処理 する か を 指定 し ます 。 初期 値 は 最初 の キー フレ ー ム の 値 を 適用 


hone で す 。 ・ both…forwards と backwards の 両 
指定 で きる キー ワー ド は 以下 の と お り で 方 を 適用 
。 


s none… ア ニメーション の 再生 前 後に 対 
象 要素 に 指定 され て いる 値 を 適用 : 初 
期 値 

s forwards… ア ニメーション 終了 後に ア 
ニメーション の 最後 の キー フレ ー ム の 6 信和 
値 を 適用 えた 


サン ツジ ルツ デズ 
く !DOCTYPE htmt> 
<html tang=" お a"><head>E 滞 当 
<styLe> 
Gkeyframes anime {て 
9% { background-cotor: crimsoni + 
199% { background-cotor: cornflowerbLuei + 
div { background-cotor: #ccccccj text-aLign: center: padding: 19px: 
animat1on-name: an1mei an1mation-duration: 1s: animat1on- て 1m1ng-function: Linears 
animation- 人 iLL-mode: bothi 衣 : 財 
</styte></head><body> 
<div><1mg src="'S2699.png" alt=""> く /d1V> 
</body> 
</htmt> 
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還 Sr 還 ーー 
* 40* 5.1* 


>| |・|・| 
オ @ 軌 に ひ L レス * ペン ダー プレ フィ ックス (C-webkit.) が 必要 


C 

mmm 8 
アニ メー ショ ン の スタ イル を 一 括 指定 する 
ロ 

串 animation: 但 人 4 田 娘 〇 O 〇 ん ム 2: 1 由 
2 … @keyframes ル ー ル の 名 前 も し く は none リ 
・ 1 回 の アニ メー ショ ン の 時 間 aileee る 

- 変更 具合 を 示す 関数 7 

… プロ パテ ィ の 変化 を 開始 する まで の 時 間 ス 


・ アニ メー ショ ン の 繰り 返し 回 数 を 示す 数 値 も し く は infinite 
・ 再生 方 向 を 指定 する キー ワー ド 

: 再生 状態 を 示す キー ワー ド 

- アニ メー ショ ン 再 生前 後 の 表示 を 指定 する キー ワー ド 


じ レ 〇 の ⑨ 金 オキ 軒 >@ 


圭介 すべ て の 要素 と :before / ::after 疑似 要素 


animation プロ パテ ィ は 、animation 各 プ ロ パ ティ の 値 を 指定 する 順序 は 自 
系 の プロ パテ ィ を まとめ て 指定 し ます 。 で きき 。 

この 節 で 取り 上 げた animation-name た だ し 、 時 間 を 指定 し た 場合 、 最 初 の 値 
グ animation-duration グ animation- が animation-duration プロ パテ ィ の 値 、 
timing-function グ animation-delay その 後に 出 て くる 値 は animation-delay 
グ animation-iteration-Ccount プ 。 プロ パテ ィ の 値 と し て 利用 され ます 。 
animation-direction グ animation-fil- 
mode の 各 プ ロ パ ティ の 値 を 扱う こと が 
で きま す 。 


| サン ブル ソー ス 」 し EEEECMNlea 
<!DOCTYPE htmt> | 


<htmt tang=!]a リ > 
<head> 葉 革 当 
く styLe> 
@keyframes an1me { 

9% { background-cotor: crimson: + 

199% { background-cotor: cornflowerbtue: + 
負 中 略 | 
dv { background-coLor: #CCCccc: 上 ex て -aLgn: 
centerj padding: 19px: 
anmation: anime 1s Linear 4 aLternate boths 
[中略 
く /styte> 
</head><body> Ns 
<div><1mg src="S2619.png"' alLt=!"></dv> 
</body> 
</htmt> 


Fe で すき 


に 


関連 アニ メー ショ ン の 名 前 (P.291)、1 回 の アニ メー ショ ン の 時 間 (P.292) 、 ア ニメーション の 変更 具合 (P.293)、 : 
アニ メー ショ ン の 開始 タイ ミン グ (P.294)、 ア ニメーション の 繰り 返し 回 数 (P.295)、 ア ニメーション の 再生 : 299 
方 向 (P.296)、 ア ニメーション の 再生 状態 (P.297) 、 ア ニメーション 再生 前 後 の 表 示 (P.298) 


AN で NJ に へ IE ロ NAO の OO 


0 | 笛 


Column 


Web サイ ト の 統一 感 を 保つ 大 本 の スタ イル 


CSS に は た くさ ん の プ 
を 使 


パテ ィ が ある た め 、 ペ ー ジ ご と に まっ た く 異 な っ た 
する と 、 ま と まり の な い Web サ イト に な っ て し まい ます 。 


タイ ル 


そもそも CSS は 、 ペ ー ジ 内 の まとまり だ け で な く 、Wieb サ イト と し て の まとまり を 作 


る た め に 作ら れ て いま す 。 


CSS を 効果 的 に 使う た め に 、Web サ イト 全体 で 使用 する 「 基 本 の スタ イル 」 を 設定 し 


Ql 


まし ょ う 。 例え ば 、 以 下 の よ うな も の が 考え られ ます 。 


書体 :font-famity、 文字 サイ ズ :font-size、 行 間 :tine-heght、 


職 
0 文字 色 :cotor な ど 
背景 背景 色 :background-coLor な ど 


文字 サイ ズ :font-size、 行間: Line-heght、 文 字 色 :coLor な ど 


要素 の 周り の 余白 :margn な ど 


要素 の 周り の 余白 :margin な ど 


テキ スト 


a 要素 に 対し て 


文字 色 :cotor、 下線 :text-decoration な ど 


訪問 済み テキ スト 文字 色 :cotor な ど 


マウ ス オ ー バ ー 時 の テキ スト 文字 色 :coLor、 下線 :text-decoration な ど 


| サン フル ソー ス 肛 i 上 ) 


く !DOCTYPE htmt> 

<htmt tang="]a"> 

<head> 

<meta charset=Wutf-8 リ > 

<Uink ret=Wstytesheet"' href="!common・ 
cSS リ > 

</head> 

く body> 

<hi> 大 見 出し </h1> 

<p> 本 文 が は いり ます 。…</p> 
<h2> 中 見 出し </h2> 

<p> 本 文 が は いり ます 。…</p> 
<h2> 中 見 出し </h2> 

<p> 本 文 が は いり ます 。・…</p> 

<p><a href="#'> リ ンク テキ スト が 入り ます 。 
… く /a> く /p> 

</body> 
</htmt> 


CSS(common.css) 


body { font-famity: "Hirag1no Kaku 
Gothic Pro", Me1ryo, sans-ser1 和 f』 fontー 
s1ze: 14pxj Line-he1ght: 1.8j coLori 
#333333: background-coLor: 1vory: 
| marg1ni 1emi + 

h1 { font-size: 28pxj Line-he1ght: 
1.3: cotor: darkgreenj marg1n: 9 } 

h2 { font-s1ze: 21pxj Line-he1ght: 
1.3: cotor: darkgreen: marg1in: 1.5em 0 
9 } 

pP { margin: 9.5em 9 9 + 

a { cotor: darkoLivegreen: 
text-decoraton: nonei } 

aivis1ted { coLor: darkseagreeni 
a:hover { text-decoration: underLine: 


| は 
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HTML の カラ ー 指 定 で は 、 カラ ー ネ ー ム を 使用 する こと が で きま す (P29、 165 参 照 。 
カラ ー ネ ー ム の 一 覧 を 掲載 し ます 。 
カラ ー ネ ー ム [ 色 見 本 16 進数 値 
#FFFFFF 
介 基 間 ] WFFFFF9 
entyetow | 寺 FFFE9 
yettow 「 人 
SnOoW #FFFAFA 
ORaUWRNRS 人 UI | 。 電 FFAF9 
temonchiffon 前 明 症 ーー デ UI 還 間 且 間 衣 且 呈 細 間 隊 遇 9) 
oiEU0MMUMOIOU 央 il2DOIM 
seasheLt #FFF5EE 
tavenderbtush 。 | 。 坦 FF9F5 
papayawhip 一 号 開 旨 問 浦 議 #FFEFD5 
planchedaumond 。 。 し UI 剛 明記 本 本 
mistyrose #FFE4E1 
IEGMENMUMNUMD ーー ニーmーーーーーーー Ji 用 用 用 4G4 
moccas1n | 人 衣 上 上 | #FFE4B5 
navajowhite 、 #FFDEAD 
peachpuff NN 
leo 


ee _#FFB6C1 
orange 上 間 』rrA509 
Tightsaumon「「「 軸 軸 還 還 較 | 間 前 開 間 間 呈 虹 #FFA97A' 
mm 肌 半 馬車 明 間 間 織 間 識 識 剛 FrFac99 
cerat'「 回 還 較 較 較 間 較 間 間 間 咽 間 間 有 朋 胡 #FF7F59 
凍 光 間 間 間 用 MIIOUUUUUUUUUEW22) 
temato 一 硬 較 症 間 較 間 間 間 間 間 間 呈 昌 開 間 間 間 間 #FFe347 
orangered rr4506 
deeppin 襲 II "oo0o{〔o〔o※@ ぁ wu ぃ 〔 大 MCPCcM 
fuchsia 上 lllllWlll 上 reorf 
magenta 較 間 "oo0o0onoj{j%※ ほ &xzz〈† ょ ?xbqbtbjbj 上 On 
red rooo6 
otdtace _ 針 DF5E6 
PTPWPRTPPPRWNPPIN PAIDP 


色 見 本 
UI | 古 AE9I 
SIRIIRIRH #FAEBD7 
satmon 男 還 画 昌 間 明 HHEE 昌 昌 昌 間 昌 間 *FABo72 
ghostwhite #F8F8FF 
lilieeecilllille 生 明日 間 、 #F5FFFA 
whitesmoke #F5F5F5 
ElccN0NINMINNNM| 、 才 5F5DC 
wheat 間 間 昌 間 間 陽 較 識 NN HU 且 に MBie 
Eu " ( ぐ ぐ ぐ ゥ =。 ぅ 9 0 て こ 有 PP 
aZure #F の FFFF 
honeydew 。 | | 寿 9FFF9 
auicebtLue #F の F8FF 
ictHUNNNNINIIIIIRIIUIIIINIENNIININMayRSEll 
Uightcorat 則 MNMNIIIIIIIIIIII 本 OU 
pauegoldenrod 。  [ 癌 結 ! EEE8/ 
viotet 
darksatmon 
Lavender 剛 #E6E6FA 
MolasciMN 則 上 | 才 9FFFF 
burtywood NMpEpsa7 
pun pp 
ga1nsboro #DCDCDC 
crinson 。 回 還 還 還 昌 昌 EE 昌 | pciasc 
paeviotetred DB7693 
goldenrocd 回 
orchid ーーーーーーーーー ツ ーー #DA79D6 
imaUENIMNMNNN 放 還 l #D8BFD8 
Lightgray #DD3D3D3 
UNgHRSM 有 M 介 MM に | 3D3D3 
tan 間 WD2B48C 
chocotate 半 、、、wpwpwpwp 1 #D2691E 
peru NN II( Il ei 困 EH 
indianred 題 だ ぞ 骨 ocee 細 
nediumyiotetred NIS ia 


ペー ロワ ロジ 呈 で で ち 


一 Maro ミ は つ 


II 間 


ji9SWDIGWMIIIIll li 


mediumorchid ONIKO0S000Omlmlnltltlt{qw ぁ q ぁ 】, し ,、j|、 還 E 


IINIINNIRINNNWHONNWmnennmmvnemmm 
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A 
P 
ロ 
E 
N 
D 
I 
X 


NR 
darkgotdenrod 
firebr1ck 
powderbLue 
tightsteetbLue 
paLeturquo1Se 
greenyeLLow 
LightbLue 
darkgray 
darkgrey 

brown 

senna 
yeLLowgreen 
darkorch1d 
pategreen 
darkv1ioLet 
mediumpurpLe 
Uightgreen 
darkseagreen 
saddLebrown 
darkmagenta 
darkred 
bLuevioLet 
LightskybLue 
skybLue 

gray 

gey 

oLive 

purpLle 

maroon 
aquamar1ne 
chartreus@e 
Lawngreen 
mediumsLateb Lue 
LightsLategray 
lightsLategrey 
sLategray 
sLategrey 
oLivedrab 
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#B8869B 
#B22222 
#B の E9E6 
#B9C4DE 
#AFEEEE 
#ADFF2F 
#ADD8E6 
#A9A9A9 
#A9A9A9 
#A52A2A 
#A の 522D 
#9ACD32 
#9932CC 
#98FB98 
#9499D3 
#937 の DB 
#90EE99 
#BFBC8F 
#8B4513 
#8B998B 
#S8B の 9 の の 
#8A2BE2 
#87CEFA 
#S7CEEB 
#898989 
#898989 
#898999 
#899989 
#899999 
#7FFFD4 
#7FFF9@9 
#7CFC の 9 
#7B68EE 
#778899 
#778899 
#7 の 8999 
#7 の 8999 
#6B8E23 


ベー ロジ mm て ち 


2 ラー コネ ー ム  。 。 。 所 見 本 。 0 = = =- ) "= 6 
SsLatebLue #6A5ACD 
djmgray #696969 
dimgrey #696969 
mediumaquamar1ne #66CDAA 
cornflowerbLue #6495ED 
cadetbLue #5F9EA@ 
darkoLUivegreen #556B2F 
jndigo #4B9982 
mediumturquo1se #48D1CC 
darkstatebLue #483D8B 
steetbLue #4682B4 
royaLbLue #4169E1 
turquo1se #49E9D の 
med1umseagreen #3CB371 
timegreen #32CD32 
darksLategray #2F4F4F 
darkstategrey #2F4F4F 
seagreen #2E8B57 
forestgreen NNN 二 旨 昌 開 #228B22 
Uightseagreen 開 開 結 腸 欄 人 目 | #20B2AA 
dodgerblue UMUNMMWMMIMM 間 foerr 
midnightbLue | 
RMA #90FFFF 
Cyan # の 9FFFF 
SPringgreehn # の 9 の FF7F 
me # の の 9FF99 
mediumspr1nggreen # の 9FA9A 
darkturquo1se # の 9CED1 
deepskybLue | # の 9BFFF 
darkcyan IMIIIIW IMWMMMMMMMWWW ooeeem 
teat eoee 
green NN ili NNWMWW 人 人 人 人 人 全 2osooe 
darkgreen EET?{〈?{?{?{〔?〈?^ ヽ 》 
btue 上 抽 上 因 間 則 間 oooorr 
mediumbtue NN LM 5 抽 2259 
darkbtue EEESNEHSTH っ 本 90 
navy og 
btack ーー 
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RGB カラ ー 16 進 数 値 対応 表 


10 進 数 つ 16 進 挨 議 識 10 信 払 つ 16 信 到 議 菩 10 人 私 つ 6 人 放 | 


10 進数 っ 16 進 数 


99 叶 99 32.7 貴 20 64 号 49 96 愛 69 
員 隊 | 91 呈 91 33 : 叶 、21 65 . き 41 97*s 叶 | 61 
92 叶 92 22 661 二 42 98 叶 62 
93 き 93 35 mk 23 >) 99 叶 63 

94 之 94 36 叶 24 68 44 199 必 64 

95 き 95 37 邊 mWL25 69 叶 45 191 ” 65 

@6 叶 96 38 き 26 79 き 46 192 呈 66 

97 容 97 39 計 叶 27 7 よ 間 只 に 導 7 193 之 67 

98 98 4 の 叶 28 729 琴 248 194 @ 68 

/ 99 叶 99 の 73 呈 49 195 叶 69 
19 叶 9A 2 12 入 7 唱 所 4A 196 叶 6A 

W 1 ni OB 43 只 2B 75 4B 197 ” 6B 
Bb の 雪 和 16 44 電 2C 76ji 凌 党 2C 198 叶 6C 
四 3 時 9D 5 時 2D ID 199 き 6D 
| 中 4 十 吐 の E 46 2E 788、4E 119 呈 6E 
15 き OF 4 の 日 79: 4F 1 員 6F 

10 沙 つ 6 人 

169 較 5. エ の 48 HL 3 の 89 59 1125。 寺 。 70 

た Py 還 入 49.! 叶 31 TO 出 38 時 7 中 

12 0 59 32 92 " 衝 お め dL 員 い 172 

19T 叶 に 13 5 時 夫 、33 GT (5 115e 73 
20'9Wi14 52 計 13 作 84 飼 54 116 守 74 
dE 53 叶 35 85 呈 55 177 お 
ES 54 叶 36 86 叶 56 3 電 PL75 

の Se 科 7 5 87。 叶 、57 HH9 電 和 7 

2 の.4 寺 寺 38 56 叶 38 88 き 58 129 放 78 

725 則夫.19 57 き 39 89 避 59 121 0W79 

26 呈 沖 作 58 叶 3A 99 叶 5A 2 グッ 寺 7 

7 半 1B 59 き 3B 9 ef 日 123 や 7B 

の 91 間 EHG 69 只 3C 92、、 守 5C 山 24 5 寺 7C 

29。 守 : 1D 61 . 3D 93 村 5D 25 Wi7BD 

39 叶 1E 62 き 3E 94 呈 |5E 126 き 7E 

9 0: 63 き 3F 95 叶 5F 27 叶 7F 


10 進 数 と 16 進数 の 対応 表 で す 。 RGB の 00 一 255 の 値 を 利用 し て カラ ー を 指定 する 
際 に は 、16 進 数 値 へ の 変換 が 必要 で す の で 、 早 見 表 と し て 活用 し て くだ さい 。 


10 進数 ゅ 16 進 数 10 進 数 つ 16 進 数 16 進 数 の 16 進数 | 


10 進 数 つ 16 進 的 


128 写 89 169 叶 A@ 出生 (⑯ の 224 腔 E@ 
っ. 委 6 AH 届 の 8 音 守 HH の 5 区 出 
139 " 写 .82 中 GO2 の A2 9 2 と 本隊 サー 
よき 1 呈 :83 よ 全 3 守 A3 gi 到 き メイ 入 ES 
132 "oe 84 164 叶 _A4 196 ご C4 ウフ 8 W ビオ 
133 守 、85 上 よ 王 入ら よき が が) 呈 C5 9 、 電 | E5 
134 叶 86 HH66:、 室 AG6 BOSS CGC6 3 の” EE6 
13 中 、 "中 の 導 よら を 。 室 AA7 Pe し 0 レポ 際 公 4 
136 [88 168 呈 A8 299 腔 C8 222 1 二 量 8 
まま 3 "に 拉 な 169 叶 A9 グ 20.、 miIGGO 及 き きり E9 
138 叶 、8 放 17 の 9 呈 AA 292 き CA 234  EA 。 問 際 電 
139 号 8B あこ AB メ 93 "時 所 時 虹 島 トロ 
149 叶 8C の の (6 294 き CC お す 生 E も b 
141 8D Br AD) 2 の 5 呈 。 で D 3 が 新 巨 選 財 
142 "8E 174 時 AE 2 の 6:。 叶 GE 23800e 、E | 
143 時 8F 75 鞭 AF 人 M、 二 も 6 39 半生 丘 
144 叶 99 176 ご B の 298 叶 D9 249 呼 F の 9 
145.. ご 9L 昌 衝 HE 肝 山 299 叶 D1 ク 2241 、 叶 …F1 
146 只 92 の 坦 紀 メ 21 の 0 叶  DZ の キク 
147 叶 93 に) グル 1 Je 夫 3 243 之 F3 
148 叶 94  B4 2 ネス み 、 " 叶 。 D4 244 叶 F4 
149 叶 95 日 ら 213。 呈 D5 人 4 ちら 5 
5 の 完 96 を 氏 人 21 ユ 4 「 B6 246  F6 
57 :B グ 昌 2 ドル We 
中 52" 叶 98 3B8 216 、 "FUDg 248 叶 :F8 
ka 隊 ん 叶 B9 2 ト 7 の 泊 符 DS 249 容 F9 
T54 叶 9A ご BA 218 呈 DA 259 守 FA 
よ ま 55)。 叶 9B | 5] 5 2 ウ 219. い mW TiDB 和夫 最 
156aWEOC に 計 じ メラ 0 叶 " DC っ 4 が は 
1 た の 1 231 や hpD SS 思 有 
呈し E あさ 肌 に グラ 入選 の 5 人 9 息 
ED 二 9 上 E に フジ 3 和 DE の 55 軸 夫 情 正 


ベー ロ 選 m で イア 


HSL カ ラー は Hue (色相 )、Saturation ( 彩 度 )、Lightness (明度 ) の 数 値 の 組み 合 
わせ で 色 の 指定 を し ます 。 下 の 表 は 色相 の 値 を 30 ご と に 区 切り 、 縦 軸 に 明度 、 横 軸 に 彩 


199% 75% 59% 25% 9% 190% 75% 50% 25% 
199 199 


色相 :30 ( 赤 - 黄 ) 
彩 度 一 彩 度 一 
199% 75% 50% 25% 9% 199% 75% 59% 25% 9% 


190 199 


色相 :60 ( 黄 ) 
彩 度 ・ 
100% 75% 50% 25% 9% 


199 199 


て 漂 品 
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度 を 置い た も の で す 。 

色相 は 赤 一 黄 一 緑 一 青 一 紫 ー 赤 と いう 色 の 変化 を 0 か ら 360 の 値 で 示し ます 。 

彩 度 は 100% は も と の 色 の 鮮やか さ 、0% に 近づく に つれ て 色 が くす ん で いい きま す 。 
明度 は 50% を 元 の 色 と し て 、100% に 近づく と 明る く な り 、0% に 近づく と 暗く な り 


ます 。HSL カラ ー を 利用 する と RGB カ ラー より も 直感 的 に 色 の 指定 が で きま す 。 


199% 75% 59% 25% 9% 190% 75% 50% 25% 9% 


199% 75% 59% 25% 9% 199% 75% 50% 25% 9% 


199% 75% 50% 25% 9% 199% 75% 59% 25% 9% 
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ペー ロジ ロロ ロア 


HTML 要素 INDEX 


(本 属性 値 ) 


明 


a リン ク 92 
accesskey 指定 し た ペー ジ に 移動 する と き の シ ョ ー ト カッ トキ ー 100 
href ダウ ン ロ ー ド 用 の リン ク ( フ ァイル パス 指定 時 ) 99 
href ハイ パー リン ク 92, 93, 94, 100, 101, 102, 123 
href ペー ジ 内 の 特定 の 場所 に リン ク 95 
(id 属性 値 指定 時 ) 
re 別 ペー ジ の 特定 の 場所 に リン ク 96 
(ファ イル パス と 1d 属 性 値 指定 時 ) 
href=!ma1tto" メー ル ア ド レス 用 の リン ク 97 
href=VteU" 電話 番号 用 の リン ク 98 
ret 外部 ファ イル と の 関係 102 
target リン ク 先 の 表示 123 
target リン ク 先 の 表示 ウイ ンド ウ ( ウ イン ドウ の 名 前 指定 時 ) 93 
target リン ク 先 を ウイ ンド ウ で 表示 (キー ワー ド 指 定時 ) 94 
titte リン ク 先 の タイ トル や 説明 101 
abbr 各 語 67 
titte 略語 の 元 の 言葉 67 
address セク ショ ン の 連絡 先 55 
area att リン ク 範 囲 の 代替 テキ スト 111 
coords リン ク 範 囲 の 座標 111 
href 外部 ファ イル の リン ク 先 102.111 
ret 外部 ファ イル と の 関係 102 
shape リン ク 範 囲 の 形 111 
target イメ ー ジ 内 に 自由 に リン ク を 設定 する 111 
articte 記事 の まとまり 49 
as1de 補足 部 分 の まとまり 51 
audio 音楽 の 配信 方 法 114 
autoptay 音楽 の 自動 再生 114 
controts 音楽 の 操作 ボタ ン 114 
toop 音楽 の ルー プ 再 生 114 
muted 音楽 を 初期 状態 で 消音 114 


pretoad 


音楽 ファ イル の 先読み 方 法 


音楽 ファ イル の URL 


b 注意 を 引 | く テ キス ト 
base href リン ク の 基準 と な る URL の 指定 
target リン ク の 基準 と な る URL の 表示 ウイ ンド ウ 
bdi 文字 を 書き 進め る 方 向 の コン トロ ー ル 範囲 
bdo 文字 を 書き 進め る 方 向 の コン トロ ー ル 
dir 文字 を 書き 進め る 方 向 
bLockquote 長い 文章 の 引用 
cte 長い 文章 の 引用 の 引用 元 URL 
body HTML 文 書 の 本 体 
br 改行 
button 要素 を 組み 合わ せ た ボ タン 
name 要素 を 組み 合わ せ た ボ タン の 名 前 
type 要素 を 組み 合わ せ た ボ タン の 動き 
vatue 要素 を 組み 合わ せ た ボ タン の サー バ に 送る デー タ 


表 組 の タイ トル 


cite 作品 の タイ トル 
code コン ピュ ー タ ー の コー ド の 一 部 
cot cotgroup 要 素 が 作る 列 グル ー プ 内 の ひと つ 以 上 の 列 
span cotgroup 要 素 が 作る 列 グ ルー プ の 列 数 
coLgroup 表 組 の 1 列 以 上 の 列 グ ルー プ 
span 表 組 の 列 グ ルー プ の 列 数 
datal1st テキ スト ボッ クス で 入力 候補 を 表示 
datattst | datatist 要 素 と 1nput 要 素 の 関連 付け 
dd 用 語 と 説明 文 の リス ト に お ける 説明 文 
det 文書 か ら の 削除 
cte 文書 か ら の 削除 を 説明 する 文書 の URL 
datet]me 文書 か ら 削 除 し た 日 時 
div 汎用 
hidden 表示 を 隠す 指定 
transLate 翻訳 の 可否 


dt 用 語 と 説明 文 の リス ト 


属性 (属性 値 ) 


dt 用 語 と 説明 文 の リス ト に お ける 用 語 81 
em テキ スト の 強調 62 
ITTT9 す すす | 9 0 MM|P に |!|!M し MRPME 
fietdset 複数 の フォ ー ム 部 品 の セッ ト 147 
figcaption 写真 な どの 説明 文 113 
figure 説明 文 つ き の 写 真 な ど 113 
footer まとまり の 最後 の 部 分 54 
form フォ ー ム の 基本 的 な 設定 126 
act1on フォ ー ム の 入力 デー タ の 送信 先 URL 126, 150 
enctype フォ ー ム か ら デ ー タ を 送る 時 の MTME タ イプ 127 
id 入力 フォ ー ム の TrD 151 
method フォ ー ム の 入力 デー タ の 送信 方 法 126 
novalidate 入力 チェ ッ ク 128 


見 出し (レベ ル 1) 46 

h2 見 出し (レベ ル 2) 46 
hs 見 出し (レベ ル 3) 46 
h4 見 出し (レベ ル 4) 46 
hs 見 出し (レベ ル 5) 46 
he 見 出し (レベ ル 6) 46 
head HTML 文書 の 概要 の 集まり 37 
header まとまり の 最初 の 部 分 53 
hr 段落 の テー マ 区 切り 59 
htmt tang HTML 文書 の ルー ト 37 
man1fes モ オフ ライ ン 時 の ブラ ウザ 表示 37, 38 


LU 声 や 窪 囲 気 な ど を 示す テキ スト 65 
frame 別 ペ ー ジ を ペー ジ 内 の 一 部 に 挿入 120 
height イン ライ ン フ レー ム の 高 さ 122 
src ペー ジ 内 の 一 部 に 挿入 する 別 ペー ジ の URL 120, 122 
srcdoc 要素 を ペー ジ 内 の 一 部 に 挿入 121 
width イン ライ ン フ レー ム の 幅 122 
mg 画像 の 挿入 106 
att 画像 が 表示 され な いと き の テ キス ト 107 
heght ブラ ウザ 上 の 画像 の 高 さ 108 


MM 
要素 属性 丁 属性 値 ) 説明 掲載 ペー ジ 
Src 画像 ファ イル の URL 106, 107, 108, 111 
usemap mg 要素 と map 要 素 の 関連 付け 11 
width ブラ ウザ 上 の 画像 の 幅 108 
1nput alt 画像 を 用 いた 送信 ボタ ン の 代替 テキ スト 144 
autocompLete 入力 項目 の 自動 補完 148 
autofocus ペー ジ を 開い た 後 の フ ォ ー カ ス 155 
checked チェ ッ ク ボ ックス の 項目 の 選択 状態 (checkbox 指 定時 ) 130 
checked ラジ オ ボ タ ン の 項目 の 選択 状態 (rado 指 定時 ) 131 
form 入力 フォ ー ム を 自由 に 配置 151 
formact1on フォ ー ム デー タ の 送信 先 の 上 書き 150 
heght 画像 を 用 いた 送信 ボタ ン の 画像 の 高 さ 144 
id フォ ー ム 部 品 と 項目 名 の 関連 付け 146 
tist datatist 要 素 と input 要 素 の 関連 付け 156 
max 数 値 の 入力 の 最大 値 153 
maxLength 1 行 の テキ スト 入力 項目 の 最大 文字 数 129 
maxtength 入力 内 容 が 隠さ れる 入力 欄 の 最大 文字 数 132 
min 数 値 の 入力 の 最小 値 153 
muttpLe ファ イル を 選択 する 項目 の 複数 選択 133 
name 1 行 の テキ スト 入力 項目 の 項目 名 (text 指 定時 ) 129 
name 画像 を 用 いた 送信 ボタ ン の 名 前 (1mage 指 定時 ) 144 
name チェ ッ ク ボ ックス の 項目 名 (checkbox 指 定時 ) 130 
入力 項目 の 名 前 
134. 135, 148, 149, 151,152, 153, 154, 155, 156 
容 が 
"ee eee 時 員 
name 入力 内 容 の リセ ッ ト ボ タン の 名 前 (reset 指 定時 ) 142 
name 入力 内 容 の 送信 ボタ ン の 名 前 (submit 指 定時 ) 143 
name 非 表 示 の 項目 の 項目 名 (hidden 指 定時 ) 141 
name ファ イル を 選択 する 項目 の 項目 名 (fte 指 定時 ) 133 
name ラジ オ ボ タ ン の 項目 名 (radio 指 定時 ) 131 
pattern テキ スト 入力 に 正規 表現 を 適用 154 
pLacehotder 入力 例 の 表示 152 
required 送信 時 の 入力 チェ ッ ク 149 
s1ze 1 行 の テキ スト 入力 項目 の 横幅 129 
sze 入力 内 容 が 隠さ れる 入力 欄 の 横幅 132 
speLLcheck 自動 スペ ル チ ェ ッ ク 33 


属性 ( 寺 属 性 値 


SrC 画像 を 用 いた 送信 ボタ ン の 画像 URL 144 
step 数 値 の 入力 値 の 精度 153 
ttte 入力 形式 を 伝え る テキ スト 154 
6 入力 項目 の 形式 

148, 149, 150, 151, 152, 153, 154, 155 
type="checkbox" チェ ッ ク ボ ックス 130 
type="ema1t" メー ル ア ド レス の 入力 欄 135 
type="fite" ファ イル を 選択 する 項目 133 
type="h1dden" 非 表 示 の 項目 141 
type="1mage" 画像 を 用 いた 送信 ボタ ン 144 
type="number" 数 値 の 入力 欄 135 
type="password" 入力 内 容 が 隠さ れる 入力 欄 132 
type="rado" ラジ オ ボ タ ン 131 
type="range" ある 範囲 内 の 数 値 の 入力 欄 135 
type="reset" 入力 内 容 の リセ ッ ト ボ タン 142 
type="'search" 検索 キー ワー ド の 入力 欄 134 
type="subm1t" 入力 内 容 の 送信 ボタ ン 143 
type="tet" 電話 番号 の 入力 欄 134 
type="text" 1 行 の テキ スト 入力 項目 129,156 
type="urU" URL の 入力 欄 134 
Ma 1 行 の テキ スト 入力 項目 の デフ ォ ル ト テ キス ト 129 

(text 指 定時 ) 

vatue 自動 スペ ル チ ェ ッ ク の テキ スト (speLLcheck 指 定時 ) 33 
vatue チェ ッ ク ボ ックス の サー バ に 送る 値 (checkbox 指 定時 ) 130 


vatue 


入力 項目 の デフ ォ ル ト テ キス ト 


134, 135, 149, 151, 152, 153, 154, 155 


入力 内 容 が 隠さ れる 入力 欄 の デフ ォ ル ト テ キス ト 


NR (password 指 定時 ) 182 
Ag 入力 内 容 の リセ ッ ト ボタ ン の 表示 テキ スト 9 
(reset 指 定時 ) 
入力 内 容 の 送信 ボタ ン の 表示 テキ スト 
本 (submit 指 定時 ) 143 
Se ーー ヾ に 送る 値 (hidden 指 定 1 
ファ イル を 選択 する 項目 の デフ ォ ル ト テ キス ト 
MM (Fite 指 定時 ) 133 
vatue ラジ オ ボ タ ン の サー バ に 送る 値 (radio 指 定時 ) 131 
width 画像 を 用 いた 送信 ボタ ン の 画像 の 幅 144 


属性 (属性 値 ) 


jns 文書 へ の 追加 64 
cite 文書 へ の 追加 を 説明 する 文書 の URL 64 
datetime 文書 に 追加 し た 日 時 64 

K-L 

kbd ユー ザー の 入力 

tabet フォ ー ム 部 品 の 項目 名 146 
for フォ ー ム 部 品 と 項目 名 の 関連 付け 146 

tegend 複数 の フォ ー ム 部 品 の セッ ト の 見 出し 147 

1 リス ト の 個別 の 項目 76, 77, 78, 80 
vaLue リス ト の 個別 の 項目 の 数 値 79 

we we を 7 no e 
href 外部 ファ イル の リン ク 先 02 
href 読み 込む CSS フ ァイル (stytesheet 指 定時 ) 104, 167 
media 閲覧 環境 ご と に CSS フ ァイル を 読み 込む と き の 対 象 104 
ret 外部 ファ イル と の 関係 02 
ret="'shortcut icon' タイ トル バー の アイ コン の 設定 103 
ret="styLesheet" 閲覧 環境 ご と に 読み 込む CSS フ ァイル を 設定 104 
ret=stytesheet" 別 フ ァイル の スタ イル の 読み 込み 67 
s1zes タイ トル バー の アイ コン の 幅 と 高 さ 103 
3 タイ トル バー の アイ コン の MTME タ イプ ]03 

(shortcut icon 指 定時 ) 

0 読み 込む CSS フ ァイル の MTME タ イプ 67 


(stytesheet 指 定時 ) 


man ペー ジ の 主 な 内 容 56 
0 イメ ー ジ マッ プ の 定義 Tl 
name mg 要素 と map 要 素 の 関連 付け の 名 前 111 
mark ハイ ライ ト 表 示 73 
meta charset 文字 エン コー ド 方 式 4 
content Web ペ ー ジ の 説明 文 、 キ ー ワ ー ド 42 
content 検索 エン ジン の 巡回 ロボ の 制御 (robots 指 定時 ) 42 
content スマ ー ト フォ ン の 表示 設定 (viewport 指 定時 ) 43 
name Web ペ ー ジ の 説明 文 、 キ ー ワ ー ド 42 
name="robots'" 検索 エン ジン の 巡回 ロボ ッ ト の 制御 42 
name="v1ewport" スマ ー ト フォ ン の 表示 設定 43 


属性 属性 値 ) 


ある 範囲 内 で の 測定 値 を ゲー ジ で 表示 157 

high 測定 値 の ゲー ジ 表 示 の 高い ほう の 境界 値 157 

tow 測定 値 の ゲー ジ 表示 の 低い ほう の 境界 値 157 

max 測定 値 の ゲー ジ 表示 の 最高 値 157 

mn 測定 値 の ゲー ジ 表 示 の 最低 値 157 

opt1mum 測定 値 の ゲー ジ 表 示 の 適正 値 157 

vaUue 測定 値 の ゲー ジ 表 示 の 測定 値 157 

主 な リン ク の 集まり 52 
lO 
data イメ ー ジ ・ ム ー ビ ー な どの ファ イル URL 109 

height イメ ー ジ ムー ビー な どの 高 さ 109 
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お 問い 合わ せ に 関し まし て 

本 書 に 関す る ご 質問 に つい て は 、 本 書 に 
記載 され て いる 内 容 に 関す る も の の み と さ せ 
て いた だ きま す 。 本 書 の 内 容 を 超え る も の や 、 
本 書 の 内 容 と 関係 の な い ご 質問 に つき まし 
て は 、 一 切 お 答え で きま せん の で 、 あ ら か じ 
め ご 了承 くだ さい 。 ま た 、 電 話 で の ご 質問 
は 受け 付け て お り ま せん の で 、FAX か 書面 
に て 下記 まで お 送り くだ さい 。 Web の 質問 
フォ ー ム も 用 意 し て お り ま す 。 

お 送り いた だ いた ご 質問 に は 、 で きる 限 
り 迅 速 に お 答え で きる よう 努力 いた し て お り 
ます が 、 場 合 に よっ て は お 答え する まで に 時 
間 が か か る こと が あり ます 。 ま た 、 回 答 の 期 
日 を ご 指定 な さっ て も 、 ご 希望 に お 応え で き 
る と は 限り ませ ん 。 

ご 質問 の 際 に 記載 いた だ いた 個人 情報 
は 、 質 問 の 返答 以外 の 目的 に は 使用 いた し 
ませ ん 。 ま た 、 質 問 の 返答 後 は 速やか に 削 
除 さ せ て いた だ きま す 。 
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ポケ ッ ト リ ファ レン ス 


大 好評 の 「HTML& スタ イ 
ル シ ー ト ポケ ッ ト リ ファ レン ス 
に 、HTML5&CSSS3 対応 の 姉 
妹 版 、 満 を 持 し て 登場 。 使 い 
や すさ 、 引 き や す さ 、 わ か りや 
すさ は その まま に 、HTML5 と 
CSS3 の 技術 動向 を 完全 フォ 
ロー し た 新版 。 よ く 使わ れる タ 
グ だ け に し ぼり 、 誰 も が が 知り 
た い 目 的 別に 紹介 。 す べ て 指 
き 下 ろ し の イラ スト は 、 こ れ ま 


で も 評判 の 楽し さ に 新た な 風 を 
吹き 込み ます 。 も ちろ ん 、 ブ ラ 
ウザ な どの 最新 動向 に も し っ か 
り 対 応 。 
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